Spezifizität beschreibt das Gewicht eines Selektors und der mit ihm verbundenen Deklarationen. Die folgende Tabelle fasst die Komponenten der Spezifizitätsberechnung zusammen.

Die Spezifizitätswerte sind kumulativ; so hat etwa ein Selektor, der zwei Element-Identifier und einen Klassen-Identifier enthält (z.B. div.aside p), die Spezifizität 0,0,1,2. Spezifizitätswerte sind in einer Rangfolge von rechts nach links angeordnet, daher hat ein Selektor mit 11 Element-Identifiern (0,0,0,11) eine niedrigere Spezifizität als ein Selektor mit nur einem Klassen-Identifier (0,0,1,0).

Die Direktive !important gibt einer Deklaration ein größeres Gewicht als Deklarationen ohne sie. Die Deklaration behält die Spezifizität ihres Selektors bei, diese wird jedoch nur im Vergleich mit anderen !important-Deklarationen betrachtet.

Die Elemente in einem Dokument bilden eine baumartige Hierarchie, in der sich das Wurzelelement an der Spitze befindet und der Rest der Dokumentstruktur sich darunter ausbreitet (wodurch das Ganze eigentlich eher wie ein Baumwurzelsystem aussieht). In einem HTML-Dokument bildet das Element html die Spitze des Baums, und die Elemente head und body entspringen daraus. Der Rest der Dokumentstruktur entspringt aus diesen Elementen. In einer solchen Struktur sind Elemente weiter unten im Baum Nachkommen ihrer Vorfahren, die sich weiter oben im Baum befinden.

CSS verwendet den Dokumentbaum für das Verfahren der Vererbung, bei der ein Stil, der auf ein Element angewendet wird, von dessen Nachkommen übernommen wird. Wenn beispielsweise das Element body den color-Wert red hat, wird dieser Wert den Dokumentbaum hinunter an die Elemente weitergereicht, die aus dem body-Element entspringen. Die Vererbung wird nur durch eine Stil-Regel unterbrochen, die sich direkt auf ein Element bezieht. Vererbte Werte haben überhaupt keine Spezifizität (was nicht dasselbe ist wie eine Spezifizität von null).

Beachten Sie, dass einige Eigenschaften nicht vererbt werden. Eine Eigenschaft definiert jeweils, ob sie vererbt wird. Einige Beispiele für nicht vererbbare Eigenschaften sind padding, border, margin und background.

Die Kaskadierung ist das Verfahren, mit dem CSS Konflikte zwischen Stildefinitionen löst; es ist mit anderen Worten das Verfahren, mit dem ein User Agent beispielsweise entscheidet, welche Farbe ein Element erhalten soll, wenn zwei verschiedene Regeln darauf anwendbar sind und jede von ihnen versucht, eine andere Farbe festzulegen. Die Kaskadierung besteht aus folgenden Schritten:

Jegliche Darstellungshinweise, die aus Nicht-CSS-Quellen stammen (z.B. der Voreinstellungsdialog eines Browsers) erhalten dasselbe Gewicht wie die Standard-Stile des User Agents (siehe Schritt 2 oben).

Der größte Teil der HTML- und XHTML-Elemente besteht aus nicht ersetzten Elementen. Das bedeutet, dass ihr Inhalt vom User Agent in einer Box dargestellt wird, die das Element selbst erzeugt. Beispielsweise ist <span>Hallo Leute</span> ein nicht ersetztes Element, und der Text Hallo Leute wird vom User Agent dargestellt. Abschnitte, Überschriften, Tabellenzellen, Listen und fast alles andere in HTML und XHTML sind nicht ersetzte Elemente.

Im Gegensatz dazu sind ersetzte Elemente diejenigen, deren Inhalt durch etwas ersetzt wird, das nicht direkt durch Dokumentinhalt dargestellt wird. Das bekannteste HTML-Beispiel ist das Element img, das durch eine Bilddatei ersetzt wird, die außerhalb des Dokuments selbst liegt. Tatsächlich hat img selbst keinen Inhalt, was wir durch die Betrachtung eines einfachen Beispiels sehen können:

<img src="hallo.gif" alt="Hi">

Es gibt keinen Inhalt in diesem Element – nur einen Elementnamen und Attribute. Nur über das Ersetzen des fehlenden Elementinhalts durch Inhalt, der mit Hilfe anderer Mittel gefunden wird (in diesem Fall das Laden eines externen Bildes, das durch das Attribut src angegeben wird) kann das Element überhaupt dargestellt werden. Ein weiteres Beispiel ist das Element input, das durch einen Radiobutton, eine Checkbox oder ein Texteingabefeld ersetzt wird, je nach seinem Typ. Ersetzte Elemenete erzeugen in ihrer Ausgabe ebenfalls Boxen.

Block-Elemente sind diejenigen, die (standardmäßig) die Breite des Inhaltsbereichs ihres Elternelements ausfüllen, so dass sich keine anderen Elemente neben ihnen befinden können. Block-Elemente bilden mit anderen Worten »Umbrüche« vor und hinter der Element-Box. Die bekanntesten Block-Elemente in HTML sind p und div. Ersetzte Elemente können Block-Elemente sein, sind jedoch üblicherweise keine.

Listeneinträge sind ein Sonderfall der Blockelemente. Sie verhalten sich in fast jeder Hinsicht genauso wie andere Block-Elemente, erzeugen aber zusätzlich eine Markierung – üblicherweise einen Listenpunkt bei Aufzählungen oder eine Zahl bei nummerierten Listen –, die an die Element-Box »angefügt« werden. Abgesehen von diesen Markierungen sind Listeneinträge mit anderen Block-Elementen identisch.

Die display-Werte, die Block-Boxen erzeugen, sind: block, list-item, table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption und (zum Zeitpunkt des Schreibens dieses Buches) alle CSS-Advanced-Layout-Templates.

Inline-Elemente sind solche, deren Element-Box innerhalb einer Textzeile erzeugt wird, wobei der Fluss dieser Zeile nicht unterbrochen wird. Das bekannteste Inline-Element ist vielleicht das Element a in HTML und XHTML. Weitere Beispiele sind span und em. Vor oder hinter diesen Elementen wird kein Umbruch erzeugt, so dass sie innerhalb des Kontextes eines anderen Elements erscheinen können, ohne dessen Darstellung zu unterbrechen.

Beachten Sie, dass CSS-Block- und Inline-Elemente zwar viel mit HTML- und XHTML-Block- und Inline-Elementen gemeinsam haben, es jedoch einen wichtigen Unterschied gibt. In HTML und XHTML können Block-Elemente keine Nachfahren von Inline-Elementen sein, während es in CSS keine Einschränkungen bezüglich der Verschachtelung von Darstellungsrollen gibt.

Die display-Werte, die Inline-Boxen erzeugen, sind: inline, inline-block, inline-table und ruby. Zum Zeitpunkt der Entstehung dieses Buches gab es noch keine explizite Definition dafür, dass die diversen spezielleren Ruby-Werte (z.B. ruby-text) ebenfalls Inline-Boxen erzeugen, aber dies scheint die wahrscheinlichste Entwicklung zu sein.

Einen Sonderfall bilden die durch display: run-in definierten Run-In-Boxen, die je nach Situation entweder eine Block- oder eine Inline-Box erzeugen können. Die Regeln, die das Ergebnis bestimmen, sind folgende:

Für den Fall, dass ein Run-In als erstes Inline-Element einer gleichrangigen Block-Box eingefügt wird (siehe Regel 2 oben), erbt es nicht die Eigenschaftswerte dieser Block-Box. Stattdessen erbt es weiterhin von seinem Elternelement in der Struktur.

Eine Block-Box erzeugt in CSS eine rechteckige Box, die als Element-Box bezeichnet wird und die Menge des von dem Element belegten Platzes definiert. Figure 1-2 zeigt die diversen Bestandteile einer Element-Box. Für eine Element-Box gelten die folgenden Regeln:

Figure 1-2. Details des Box-Modells

Eine Inline-Box in CSS erzeugt eine oder mehrere rechteckige Boxen, je nachdem, ob sich die Inline-Box über mehrere Zeilen erstreckt. Für Inline-Boxen gelten folgende Regeln:

Es gibt einige Regeln, die sogar noch undurchsichtiger sind als die letzten beiden. Sie sind jedoch zu umfangreich, um sie hier aufzuführen; siehe http://w3.org/TR/css3-box/#inline-replaced für Details.

Alle Inline-Elemente besitzen eine line-height, die maßgeblich bestimmt, wie die Elemente dargestellt werden. Die Höhe einer Textzeile wird unter Einbeziehung folgender Faktoren festgelegt: