CSS Grundlagen lernen – Kaskade, Vererbung, Box-Modell

Einstieg: CSS an HTML anbinden

Wie ein Stylesheet zum Dokument kommt, wie eine Regel aufgebaut ist und welche Werte eine Eigenschaft annehmen kann.

Das Dokument: Baum, Typen, Prüfung

CSS arbeitet auf dem Dokumentbaum. Wer ihn kennt, versteht Vererbung, Selektoren und den Unterschied zwischen Standard- und Quirks-Modus.

DokumentstammbaumDer Dokumentstammbaum5 min
DokumententypenDer Dokumententyp7 min
CSS-ValidationCSS-Validation13 min

Kaskade, Spezifität, Vererbung

Die drei Mechanismen, die entscheiden, welche Deklaration am Ende gilt. Dazu die Definitionen der Spezifikation, auf die alle anderen Kapitel verweisen.

Box-Modell und visuelle Formatierung

Jedes Element ist eine Box. Außenabstand, Rahmen, Innenabstand, Inhalt, das Verhalten im Fluss, beim Floaten und in der Zeile.

Tabellen, Medien, Druck, Änderungen

Das Tabellenmodell, Medientypen, Seitenumbrüche für den Druck und die Änderungen von CSS 2 zu CSS 2.1.

Warum die Konzepte vor den Eigenschaften kommen

Eine Eigenschaft lässt sich nachschlagen; ein Zusammenhang nicht. Wer weiß, was margin tut, aber nicht, dass senkrechte Außenabstände benachbarter Blöcke zusammenfallen, misst am Ergebnis und findet den Fehler nicht in der Referenz – dort steht die Eigenschaft ja richtig beschrieben. Dasselbe gilt für eine Regel, die nicht greift, weil eine andere spezifischer ist, und für eine Farbe, die von weiter oben geerbt wird, statt vom eigenen Selektor zu kommen.

Die Erfahrung aus Foren und Schulungen ist deshalb eindeutig: Der größere Teil der Fragen, die als Frage nach einer Eigenschaft gestellt werden, ist in Wahrheit eine Frage nach einem der vier Konzepte. Vier Nachmittage mit Kaskade, Spezifität, Vererbung und Box-Modell ersparen später Wochen, in denen man an Symptomen arbeitet.

Was sich seit CSS 2.1 nicht geändert hat

Alles, was in diesem Kapitel steht, gilt unverändert. Die Kaskade hat eine Stufe dazubekommen – die Schichten –, aber ihre Reihenfolge aus Herkunft, Spezifität und Quelltextreihenfolge ist dieselbe. Die Spezifität zählt weiterhin Kennungen, Klassen und Typen in einem Tupel; hinzugekommen sind nur Pseudoklassen, die sich beim Zählen unterschiedlich verhalten. Die Vererbung folgt derselben Aufteilung, und das Box-Modell rechnet genauso, nur lässt sich die Zählweise heute umschalten.

Auch die Syntax selbst ist stabil geblieben: Eine Regel besteht weiterhin aus Selektor und Deklarationsblock, eine Deklaration aus Eigenschaft und Wert, und die Schreibweise, in der die Spezifikation erlaubte Werte notiert, ist dieselbe geblieben. Wer sie einmal lesen kann, kann jede Wertangabe in jedem Modul auflösen – auch in einem, das es zum Zeitpunkt des Lernens noch gar nicht gab.

Geändert hat sich vor allem, was hinzugekommen ist – und zwar überwiegend als Antwort auf Aufgaben, für die CSS 2.1 nur Umwege kannte: mehrspaltige Anordnungen ohne umflossene Elemente, senkrechte Zentrierung ohne Tabellenzellen, Werte, die sich an einer Stelle ändern lassen und überall wirken. Kein einziges dieser Module nimmt etwas zurück; sie fügen hinzu.

Das ist der Grund, warum sich das Lernen an diesem Stand lohnt und nicht am jeweils neuesten Modul. Flexbox, Grid, Custom Properties und Container Queries setzen alle vier Konzepte voraus und ändern keines davon: Ein Flex-Item unterliegt derselben Kaskade wie jedes andere Element, eine Custom Property wird wie jede andere Eigenschaft vererbt, und ein Grid-Container ist eine Box aus vier Schichten. Wer die Grundlagen kennt, liest die Module als Erweiterung; wer sie überspringt, sammelt Rezepte.

CSS Grundlagen: Kaskade, Vererbung, Spezifität und das Box-Modell