Wenn Sie können, stellen Sie sich eine Zeit vor der Erfindung des Internets vor. Websites gab es nicht, und Bücher, gedruckt auf Papier und fest gebunden, waren Ihre primäre Informationsquelle. Es erforderte eine beträchtliche Menge an Mühe und Lektüre, um genau die Informationen aufzuspüren, die Sie suchten.
Heute können Sie einen Webbrowser öffnen, zur Suchmaschine Ihrer Wahl springen und los suchen. Jede nur erdenkliche Information liegt in Ihren Fingerspitzen. Und die Chancen stehen gut, dass irgendjemand irgendwo eine Website gebaut hat, die genau auf Ihre Suche zugeschnitten ist.
In diesem Buch zeige ich Ihnen, wie Sie Ihre eigenen Websites mit den beiden dominierenden Computersprachen – HTML und CSS – erstellen können.
Bevor wir uns auf die Reise machen, um zu lernen, wie man Websites mit HTML und CSS erstellt, ist es wichtig, die Unterschiede zwischen den beiden Sprachen, die Syntax jeder Sprache und einige gängige Begriffe zu verstehen.
Was sind HTML & CSS?
HTML, HyperText Markup Language, gibt Inhalten Struktur und Bedeutung, indem es diese Inhalte zum Beispiel als Überschriften, Absätze oder Bilder definiert. CSS, oder Cascading Style Sheets, ist eine Präsentationssprache, die entwickelt wurde, um das Erscheinungsbild von Inhalten zu gestalten – z.B. mit Hilfe von Schriften oder Farben.
Die beiden Sprachen – HTML und CSS – sind unabhängig voneinander und sollten es auch bleiben. CSS sollte nicht innerhalb eines HTML-Dokuments geschrieben werden und andersherum. In der Regel wird HTML immer den Inhalt darstellen, und CSS wird immer das Aussehen dieses Inhalts repräsentieren.
Mit diesem Verständnis des Unterschieds zwischen HTML und CSS, lassen Sie uns in HTML im Detail eintauchen.
Verständnis allgemeiner HTML-Begriffe
Während Sie mit HTML anfangen, werden Sie wahrscheinlich auf neue – und oft seltsame – Begriffe stoßen. Mit der Zeit werden Sie immer vertrauter mit ihnen, aber die drei gängigen HTML-Begriffe, mit denen Sie beginnen sollten, sind Elemente, Tags und Attribute.
Elemente
Elemente werden durch die Verwendung von spitzen Klammern < > gekennzeichnet, die den Elementnamen umgeben. So sieht ein Element wie folgt aus:
1 2
<a>
Tags
Durch die Verwendung von kleiner-als und größer-als spitzen Klammern, die ein Element umgeben, entsteht ein sogenanntes Tag. Tags treten meist in Paaren von öffnenden und schließenden Tags auf.
Ein öffnendes Tag markiert den Anfang eines Elements. Es besteht aus einem Kleiner-als-Zeichen, gefolgt vom Namen des Elements, und endet mit einem Größer-als-Zeichen; zum Beispiel <div>.
Ein schließendes Tag markiert das Ende eines Elements. Es besteht aus einem Weniger-als-Zeichen, gefolgt von einem Schrägstrich und dem Namen des Elements, und endet mit einem Größer-als-Zeichen; zum Beispiel </div>.
Der Inhalt, der zwischen dem öffnenden und dem schließenden Tag liegt, ist der Inhalt des Elements. Ein Anker-Link zum Beispiel hat ein öffnendes Tag von <a> und ein schließendes Tag von </a>. Was zwischen diesen beiden Tags liegt, ist der Inhalt des Anker-Links.
Die Anker-Tags sehen also in etwa so aus:
1 2
<a>...</a>
Attribute
Attribute sind Eigenschaften, die verwendet werden, um zusätzliche Informationen über ein Element bereitzustellen. Zu den häufigsten Attributen gehören das id-Attribut, das ein Element identifiziert; das class-Attribut, das ein Element klassifiziert; das src-Attribut, das eine Quelle für einbettbare Inhalte angibt; und das href-Attribut, das eine Hyperlink-Referenz auf eine verlinkte Ressource liefert.
Attribute werden innerhalb des öffnenden Tags, nach dem Namen eines Elements, definiert. Im Allgemeinen enthalten Attribute einen Namen und einen Wert. Das Format für diese Attribute besteht aus dem Attributnamen, gefolgt von einem Gleichheitszeichen und dann einem in Anführungszeichen gesetzten Attributwert. Zum Beispiel würde ein <a>-Element, das ein href-Attribut enthält, wie folgt aussehen:
1 2
<a href="http://shayhowe.com/">Shay Howe</a>
Common HTML Terms Demo
Sehen Sie sich den Pen Common HTML Terms von Shay Howe (@shayhowe) auf CodePen an.
Der vorangehende Code zeigt den Text „Shay Howe“ auf der Webseite an und bringt den Benutzer zu http://shayhowe.com/, wenn er auf den Text „Shay Howe“ klickt. Das Anker-Element wird mit den öffnenden <a> und schließenden </a> Tags deklariert, die den Text einschließen, und das Hyperlink-Referenzattribut und der Wert werden mit href="http://shayhowe.com" im öffnenden Tag deklariert.
Abbildung 1
HTML-Syntax-Übersicht mit Element, Attribut, und Tag
Nun, da Sie wissen, was HTML-Elemente, -Tags und -Attribute sind, lassen Sie uns einen Blick darauf werfen, wie wir unsere erste Web-Seite zusammenstellen.
Einrichten der HTML-Dokumentenstruktur
HTML-Dokumente sind reine Textdokumente, die mit einer .html-Dateierweiterung und nicht mit einer .txt-Dateierweiterung gespeichert werden. Um mit dem Schreiben von HTML zu beginnen, benötigen Sie zunächst einen einfachen Texteditor, mit dem Sie vertraut sind. Dazu gehören leider nicht Microsoft Word oder Pages, da dies Rich-Text-Editoren sind. Zwei der beliebtesten Texteditoren zum Schreiben von HTML und CSS sind Dreamweaver und Sublime Text. Kostenlose Alternativen sind Notepad++ für Windows und TextWrangler für Mac.
Die Dokumenttyp-Deklaration, oder <!DOCTYPE html>, informiert Webbrowser, welche Version von HTML verwendet wird und wird ganz am Anfang des HTML-Dokuments platziert. Da wir die neueste Version von HTML verwenden werden, lautet unsere Dokumenttyp-Deklaration einfach <!DOCTYPE html>. Nach der Dokumenttyp-Deklaration kennzeichnet das <html>-Element den Anfang des Dokuments.
Innerhalb des <html>-Elements kennzeichnet das <head>-Element den Anfang des Dokuments, einschließlich aller Metadaten (begleitende Informationen über die Seite). Der Inhalt innerhalb des <head>-Elements wird nicht auf der Webseite selbst angezeigt. Stattdessen kann er den Titel des Dokuments (der in der Titelleiste des Browser-Fensters angezeigt wird), Links zu externen Dateien oder andere nützliche Metadaten enthalten.
Der gesamte sichtbare Inhalt der Webseite befindet sich innerhalb des <body>-Elements. Eine Aufschlüsselung einer typischen HTML-Dokumentenstruktur sieht so aus:
HTML-Dokumentenstruktur-Demo
Sehen Sie sich die Pen HTML Document Structure von Shay Howe (@shayhowe) auf CodePen an.
Der vorangehende Code zeigt das Dokument beginnend mit der Dokumenttyp-Deklaration, <!DOCTYPE html>, direkt gefolgt von dem <html>-Element. Innerhalb des <html> Elements kommen die <head> und <body> Elemente. Das <head>-Element enthält die Zeichenkodierung der Seite über das <meta charset="utf-8">-Tag und den Titel des Dokuments über das <title>-Element. Das <body> Element beinhaltet eine Überschrift über das <h1> Element und einen Absatz über das <p> Element. Da sowohl die Überschrift als auch der Absatz innerhalb des <body>-Elements verschachtelt sind, sind sie auf der Webseite sichtbar.
Wenn ein Element innerhalb eines anderen Elements platziert wird, auch bekannt als verschachtelt, ist es eine gute Idee, dieses Element einzurücken, um die Dokumentstruktur gut organisiert und lesbar zu halten. Im vorherigen Code wurden sowohl das <head> als auch das <body>-Element innerhalb des <html>-Elements verschachtelt und eingerückt. Das Muster der Einrückung für Elemente setzt sich fort, wenn neue Elemente innerhalb der <head>– und <body>-Elemente hinzugefügt werden.
Selbstschließende Elemente
Im vorherigen Beispiel hatte das <meta>-Element nur einen Tag und enthielt keinen schließenden Tag. Keine Angst, dies war beabsichtigt. Nicht alle Elemente bestehen aus öffnenden und schließenden Tags. Einige Elemente erhalten ihren Inhalt oder ihr Verhalten einfach von Attributen innerhalb eines einzigen Tags. Das <meta>-Element ist eines dieser Elemente. Der Inhalt des vorherigen <meta>-Elements wird mit Hilfe des charset-Attributs und dessen Wert zugewiesen. Andere übliche selbstschließende Elemente sind
<br>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<wbr>
Die hier skizzierte Struktur, Die hier skizzierte Struktur, die den Dokumenttyp <!DOCTYPE html> und die Elemente <html><head> und <body> verwendet, ist durchaus üblich. Wir wollen diese Dokumentstruktur griffbereit halten, da wir sie oft verwenden werden, wenn wir neue HTML-Dokumente erstellen.
Code-Validierung
Auch wenn wir beim Schreiben unseres Codes noch so sorgfältig sind, werden wir unweigerlich Fehler machen. Zum Glück haben wir beim Schreiben von HTML und CSS Validatoren, die unsere Arbeit überprüfen. Das W3C hat sowohl HTML- als auch CSS-Validatoren entwickelt, die den Code auf Fehler überprüfen. Die Validierung unseres Codes hilft nicht nur dabei, dass er in allen Browsern korrekt dargestellt wird, sondern hilft uns auch dabei, die besten Praktiken für das Schreiben von Code zu lernen.
In der Praxis
Als Webdesigner und Frontend-Entwickler haben wir den Luxus, eine Reihe von großartigen Konferenzen zu besuchen, die sich unserem Handwerk widmen. Wir werden unsere eigene Konferenz, die Styles Conference, erfinden und im Laufe der folgenden Lektionen eine Website für sie erstellen. Los geht’s!
Abbildung 1
Unsere ersten Schritte bei der Erstellung unserer Styles Conference-Website
Lassen Sie uns ein wenig den Gang wechseln, weg von HTML, und einen Blick auf CSS werfen. Denken Sie daran, dass HTML den Inhalt und die Struktur unserer Webseiten definiert, während CSS den visuellen Stil und das Erscheinungsbild unserer Webseiten bestimmt.
Gebräuchliche CSS-Begriffe verstehen
Zusätzlich zu den HTML-Begriffen gibt es ein paar gebräuchliche CSS-Begriffe, mit denen Sie sich vertraut machen sollten. Zu diesen Begriffen gehören Selektoren, Eigenschaften und Werte. Wie bei der HTML-Terminologie gilt auch hier: Je mehr Sie mit CSS arbeiten, desto mehr werden Ihnen diese Begriffe in Fleisch und Blut übergehen.
Selektoren
Wenn Elemente zu einer Webseite hinzugefügt werden, können sie mit CSS gestylt werden. Ein Selektor gibt genau an, welches Element oder welche Elemente innerhalb unseres HTMLs angepeilt und mit Stilen (wie Farbe, Größe und Position) versehen werden sollen. Selektoren können eine Kombination von verschiedenen Qualifizierern enthalten, um bestimmte Elemente auszuwählen, je nachdem, wie spezifisch wir sein wollen. Zum Beispiel können wir jeden Absatz auf einer Seite auswählen, oder wir können nur einen bestimmten Absatz auf einer Seite auswählen.
Selektoren zielen im Allgemeinen auf einen Attributwert, wie z.B. einen id oder class Wert, oder auf den Typ des Elements, wie z.B. <h1> oder <p>.
In CSS werden Selektoren mit geschweiften Klammern gefolgt, {}, die die Stile umfassen, die auf das ausgewählte Element angewendet werden sollen. Der Selektor hier zielt auf alle <p> Elemente.
1 2
p { ... }
Eigenschaften
Wenn ein Element ausgewählt ist, bestimmt eine Eigenschaft die Stile, die auf dieses Element angewendet werden. Eigenschaftsnamen stehen nach einem Selektor, innerhalb der geschweiften Klammern, {}, und unmittelbar vor einem Doppelpunkt, :. Es gibt zahlreiche Eigenschaften, die wir verwenden können, wie z. B. backgroundcolorfont-sizeheight und width, und es werden oft neue Eigenschaften hinzugefügt. Im folgenden Code definieren wir die Eigenschaften color und font-size, die auf alle <p> Elemente angewendet werden sollen.
1 2 3 4 5
p { color: ...; font-size: ...; }
Werte
Bislang haben wir ein Element mit einem Selektor ausgewählt und bestimmt, welchen Stil wir mit einer Eigenschaft anwenden möchten. Jetzt können wir das Verhalten dieser Eigenschaft mit einem Wert bestimmen. Werte können als der Text zwischen dem Doppelpunkt, :, und dem Semikolon, ;, identifiziert werden. Hier wählen wir alle <p> Elemente aus und setzen den Wert der color Eigenschaft auf orange und den Wert der font-size Eigenschaft auf 16 Pixel.
1 2 3 4 5
p { color: orange; font-size: 16px; }
Zur Wiederholung: In CSS beginnt unser Regelwerk mit dem Selektor, der unmittelbar von geschweiften Klammern gefolgt wird. Innerhalb dieser geschweiften Klammern befinden sich Deklarationen, die aus Eigenschafts- und Wertepaaren bestehen. Jede Deklaration beginnt mit einer Eigenschaft, auf die ein Doppelpunkt, der Eigenschaftswert und schließlich ein Semikolon folgen.
Es ist üblich, Eigenschafts- und Wertepaare innerhalb der geschweiften Klammern einzurücken. Wie bei HTML helfen diese Einrückungen, unseren Code organisiert und lesbar zu halten.
Abbildung 1
CSS-Syntaxumriss mit Selektor, Eigenschaften, und Werte
Ein paar gängige Begriffe und die allgemeine Syntax von CSS zu kennen, ist ein guter Anfang, aber wir müssen noch ein paar Dinge lernen, bevor wir zu tief einsteigen. Insbesondere müssen wir einen genaueren Blick darauf werfen, wie Selektoren in CSS funktionieren.
Arbeiten mit Selektoren
Selektoren zeigen, wie bereits erwähnt, an, welche HTML-Elemente gestylt werden. Es ist wichtig zu verstehen, wie man Selektoren verwendet und wie sie eingesetzt werden können. Der erste Schritt besteht darin, sich mit den verschiedenen Arten von Selektoren vertraut zu machen. Wir beginnen mit den gängigsten Selektoren: Typ-, Klassen- und ID-Selektoren.
Typ-Selektoren
Typ-Selektoren zielen auf Elemente anhand ihres Elementtyps. Wenn wir zum Beispiel alle Division-Elemente, <div>, ansprechen wollen, würden wir einen Typ-Selektor von div verwenden. Der folgende Code zeigt einen Typ-Selektor für Division-Elemente sowie das entsprechende HTML, das er auswählt.
CSS
1 2
div { ... }
HTML
1 2 3
<div>...</div> <div>...</div>
Klassenselektoren
Klassenselektoren erlauben es uns, ein Element basierend auf dem Attributwert des Elements class auszuwählen. Klassenselektoren sind etwas spezifischer als Typselektoren, da sie eine bestimmte Gruppe von Elementen und nicht alle Elemente eines Typs auswählen.
Klassenselektoren ermöglichen es, dieselben Stile auf verschiedene Elemente gleichzeitig anzuwenden, indem sie denselben class-Attributwert für mehrere Elemente verwenden.
In CSS werden Klassen durch einen führenden Punkt, ., gefolgt von dem class-Attributwert, gekennzeichnet. Hier wählt der Klassenselektor jedes Element aus, das den class-Attributwert von awesome enthält, einschließlich der Teilungs- und Absatzelemente.
ID-Selektoren sind noch präziser als Klassenselektoren, da sie jeweils nur auf ein einziges Element abzielen. So wie Klassen-Selektoren den class-Attributwert eines Elements als Selektor verwenden, verwenden ID-Selektoren den id-Attributwert eines Elements als Selektor.
Unabhängig davon, auf welchem Elementtyp sie erscheinen, können id-Attributwerte nur einmal pro Seite verwendet werden. Wenn sie verwendet werden, sollten sie für signifikante Elemente reserviert werden.
In CSS werden ID-Selektoren durch ein führendes Hash-Zeichen gekennzeichnet, #, gefolgt von dem id-Attributwert. Hier wird der ID-Selektor nur das Element auswählen, das den id-Attributwert von shayhowe enthält.
CSS
1 2
#shayhowe { ... }
HTML
1 2
<div>...</div>
Zusätzliche Selektoren
Selektoren sind extrem mächtig, und die hier skizzierten Selektoren sind die gebräuchlichsten Selektoren, die wir kennen. Diese Selektoren sind auch nur der Anfang. Es gibt viele fortgeschrittenere Selektoren und sie sind leicht verfügbar. Wenn Sie sich mit diesen Selektoren wohlfühlen, scheuen Sie sich nicht, sich mit einigen der fortgeschritteneren Selektoren zu befassen.
Alles klar, alles beginnt sich zusammenzufügen. Wir fügen Elemente in unserem HTML-Code zu einer Seite hinzu und können dann diese Elemente auswählen und mit CSS Stile auf sie anwenden. Lassen Sie uns nun die Punkte zwischen unserem HTML und CSS verbinden und diese beiden Sprachen zusammenarbeiten lassen.
CSS referenzieren
Um unser CSS mit unserem HTML zu verbinden, müssen wir unsere CSS-Datei in unserem HTML referenzieren. Die beste Methode für die Referenzierung unseres CSS ist es, alle unsere Stile in ein einziges externes Stylesheet einzubinden, das vom <head>-Element unseres HTML-Dokuments referenziert wird. Die Verwendung eines einzigen externen Stylesheets ermöglicht es uns, dieselben Stile auf der gesamten Website zu verwenden und schnell Änderungen auf der gesamten Website vorzunehmen.
Weitere Optionen für das Hinzufügen von CSS
Weitere Optionen für die Referenzierung von CSS sind die Verwendung von internen und Inline-Styles. Diese Optionen sind in der freien Wildbahn anzutreffen, aber im Allgemeinen verpönt, da sie die Aktualisierung von Websites umständlich und unhandlich machen.
Um unser externes CSS-Stylesheet zu erstellen, wollen wir wieder den Texteditor unserer Wahl verwenden, um eine neue Textdatei mit der Dateierweiterung .css zu erstellen. Unsere CSS-Datei sollte im selben Ordner oder einem Unterordner gespeichert werden, in dem sich auch unsere HTML-Datei befindet.
Innerhalb des <head>-Elements des HTML-Dokuments wird das <link>-Element verwendet, um die Beziehung zwischen der HTML-Datei und der CSS-Datei zu definieren. Da wir auf CSS verlinken, verwenden wir das rel-Attribut mit dem Wert stylesheet, um ihre Beziehung zu spezifizieren. Außerdem wird das Attribut href (oder Hyperlink-Referenz) verwendet, um den Speicherort oder Pfad der CSS-Datei zu identifizieren.
Betrachten Sie das folgende Beispiel eines HTML-Dokuments <head>-Elements, das ein einzelnes externes Stylesheet referenziert.
Damit das CSS korrekt gerendert wird, muss der Pfad des href-Attributwerts direkt damit korrelieren, wo unsere CSS-Datei gespeichert ist. Im vorangegangenen Beispiel ist die main.css-Datei am gleichen Ort wie die HTML-Datei gespeichert, auch bekannt als Stammverzeichnis.
Wenn unsere CSS-Datei in einem Unterverzeichnis oder Unterordner liegt, muss der href-Attributwert entsprechend mit diesem Pfad korrelieren. Wenn unsere main.css-Datei zum Beispiel in einem Unterverzeichnis namens stylesheets gespeichert wäre, würde der href-Attributwert stylesheets/main.css lauten, wobei ein Schrägstrich den Wechsel in ein Unterverzeichnis anzeigt.
An diesem Punkt beginnen unsere Seiten langsam aber sicher zum Leben zu erwachen. Wir haben uns nicht allzu sehr mit CSS beschäftigt, aber Sie haben vielleicht bemerkt, dass einige Elemente Standardstile haben, die wir nicht in unserem CSS deklariert haben. Das bedeutet, dass der Browser seine eigenen bevorzugten CSS-Stile für diese Elemente vorschreibt. Glücklicherweise können wir diese Stile recht einfach überschreiben, was wir als Nächstes mit CSS-Resets tun werden.
Using CSS Resets
Jeder Webbrowser hat seine eigenen Standardstile für verschiedene Elemente. Wie Google Chrome Überschriften, Absätze, Listen usw. rendert, kann sich von der Darstellung im Internet Explorer unterscheiden. Um eine browserübergreifende Kompatibilität zu gewährleisten, sind CSS-Resets weit verbreitet.
CSS-Resets nehmen jedes gängige HTML-Element mit einem vordefinierten Stil und bieten einen einheitlichen Stil für alle Browser. Bei diesen Resets werden in der Regel alle Größenangaben, Ränder, Auffüllungen oder zusätzliche Stile entfernt und diese Werte abgeschwächt. Da CSS von oben nach unten kaskadiert – dazu später mehr -, muss das Zurücksetzen ganz oben im Stylesheet stehen. Auf diese Weise wird sichergestellt, dass diese Stile zuerst gelesen werden und dass alle verschiedenen Webbrowser von einer gemeinsamen Basis ausgehen.
Es gibt eine Reihe von verschiedenen Rücksetzungsmöglichkeiten, die alle ihre eigenen Vorteile haben. Eines der populärsten Resets ist das von Eric Meyer, das so angepasst wurde, dass es Stile für die neuen HTML5-Elemente enthält.
Wenn Sie sich ein bisschen abenteuerlustiger fühlen, gibt es auch Normalize.css, das von Nicolas Gallagher erstellt wurde. Normalize.css konzentriert sich nicht darauf, einen harten Reset für alle gängigen Elemente zu verwenden, sondern setzt stattdessen gemeinsame Stile für diese Elemente. Es erfordert ein stärkeres Verständnis von CSS sowie ein Bewusstsein dafür, wie Sie Ihre Stile haben möchten.
Browserübergreifende Kompatibilität & Testen
Wie bereits erwähnt, stellen verschiedene Browser Elemente auf unterschiedliche Weise dar. Es ist wichtig, den Wert von Cross-Browser-Kompatibilität und Tests zu erkennen. Websites müssen nicht in jedem Browser exakt gleich aussehen, aber sie sollten nahe dran sein. Welche Browser Sie unterstützen möchten und in welchem Maße, ist eine Entscheidung, die Sie auf der Grundlage dessen treffen müssen, was für Ihre Website am besten ist.
Insgesamt gibt es eine Handvoll Dinge, auf die Sie beim Schreiben von CSS achten sollten. Die gute Nachricht ist, dass alles möglich ist, und mit ein wenig Geduld werden wir alles herausfinden.
In der Praxis
Wir machen da weiter, wo wir zuletzt bei unserer Konferenz-Website aufgehört haben, und wollen sehen, ob wir ein bisschen CSS einbauen können.
Zeit, unsere Arbeit zu überprüfen und zu sehen, ob unser HTML und CSS miteinander auskommen. Wenn Sie nun unsere index.html-Datei in einem Webbrowser öffnen (oder die Seite aktualisieren, wenn sie bereits geöffnet ist), sollte das Ergebnis etwas anders aussehen als zuvor.
Abbildung 1
Unsere Styles Conference Website mit einem CSS-Reset
Demo &Quellcode
Nachfolgend können Sie die Styles Conference Website in ihrem aktuellen Zustand betrachten, sowie den Quellcode der Website im aktuellen Zustand herunterladen.
Die Styles Conference Website ansehen oder den Quellcode herunterladen (Zip-Datei)
Zusammenfassung
So weit, so gut! Wir haben in dieser Lektion ein paar große Schritte gemacht.
Stellen Sie sich vor, Sie kennen jetzt die Grundlagen von HTML und CSS. Wenn wir weitermachen und Sie mehr Zeit mit dem Schreiben von HTML und CSS verbringen, werden Sie sich mit den beiden Sprachen viel wohler fühlen.
Zur Rekapitulation: Bis jetzt haben wir Folgendes behandelt:
Der Unterschied zwischen HTML und CSS
Kennenlernen von HTML-Elementen, -Tags und -Attributen
Einrichten der Struktur Ihrer ersten Webseite
Kennenlernen von CSS-Selektoren, Eigenschaften und Werten
Arbeiten mit CSS-Selektoren
Referenzieren von CSS in Ihrem HTML
Der Wert von CSS-Resets
Nun lassen Sie uns einen genaueren Blick auf HTML werfen und ein wenig über Semantik lernen.
