CSS 2.0 noch
id
-Attributen gleichgestellt und erhöhten den (nun) unter Kategorie B angeführten Wert. Die Kategorie A existierte in CSS 2.0 noch gar nicht.
    Pseudoelemente wie
:first-line
,
:first-letter
,
:before
und
:after
, die seit CSS 2.1 unter Kategorie D verbucht werden, wurden in CSS 2.0 gänzlich ignoriert.
Sortierung nach der Reihenfolge des Vorkommens
    Existieren zwei oder mehrere Selektoren bezüglich Ursprung und Priorität sowie identischer Spezifität, entscheidet die Reihenfolge des Vorkommens. Später notierte Selektoren überschreiben vorangegangene. Deklarationen aus importierten Stylesheets werden hierbei als zuerst vorkommend betrachtet, auch wenn beispielsweise einer
@import
-Regel bereits Format-Definitionen vorangehen.
13.3      Das Boxmodell von CSS
    Zum Grundverständnis für das Arbeiten mit CSS gehört auch das Wissen darüber, wie ein Element sich genau über das Browserfenster erstreckt. Wichtig wird dieses Wissen dann, wenn der Erstreckungsraum eines Elements optisch sichtbar wird, etwa durch Hintergrundfarben oder Rahmen. In diesem Abschnitt wird das im Rahmen von CSS standardisierte Boxmodell vorgestellt. Auf ältere, davon abweichende Browser-Modelle, Kompatibilitätsmodi und Browser-Hacks wird dagegen verzichtet.
13.3.1    Das Verhalten von Block-Elementen
    Grundsätzlich ist innerhalb des Textflusses zwischen Block- und Inline-Elementen zu unterscheiden. Block-Elemente nehmen dabei, wenn nichts anderes erzwungen wird, in der Breite so viel Raum wie möglich ein und in der Höhe so viel Raum wie erforderlich.
Beispiel
    

    Ein schöner Tag
    

    Bild 13.3: Block-Elemente: so viel Breite wie möglich, so viel Höhe wie erforderlich
Erläuterung
    Eine Überschrift 1. Ordnung (
h1
-Element) gehört zu den Block-Elementen, also Elementen, die einen neuen Absatz im Textfluss erzeugen. Durch die silbergraue Hintergrundfarbe, die dem Element im Beispiel mit CSS zugewiesen wird, wird der Erstreckungsraum des
h1
-Elements sichtbar.
Weitere Hinweise
    Mit Hilfe der CSS-Eigenschaft
width
können Sie die Breite von Block-Elementen genau definieren. Die Angabe
width: 100%;
entspricht dem Default-Verhalten. Mit einer Angabe wie
width: 50%;
oder
width: 345px;
können Sie die eingenommene Breite reduzieren. Die Grundeigenschaft, dass Block-Elemente eine neue Zeile im Textfluss erzeugen, wird davon jedoch nicht berührt. Um Block-Elemente tatsächlich nebeneinander anzuordnen, ist die CSS-Eigenschaft
float
erforderlich. Damit können Sie ein Element von nachfolgenden Elementen umfließen lassen.
13.3.2    Das Verhalten von Inline-Elementen
    Inline-Elemente nehmen, wenn nichts anderes erzwungen wird, sowohl in der Breite als auch in der Höhe nur so viel Raum ein wie erforderlich.
Beispiel
    

    An einem
    wirklich schönen Tag im September …
    

    Bild 13.4: Inline-Elemente: nur so viel Breite und Höhe wie erforderlich
Erläuterung
    Ein
em
-Element gehört zu den Inline-Elementen, also Elementen, die keinen neuen Absatz im Textfluss erzeugen. Durch die silbergraue Hintergrundfarbe wird der Erstreckungsraum des
em
-Elements sichtbar.
Weitere Hinweise
    Manchmal besteht der Wunsch, Inline-Elemente wegen ihrer passenden Bedeutung beizubehalten, ihnen aber die Charakteristik von Block-Elementen zu verleihen. Das ist mit derCSS-Formatdefinition
display: block;
möglich. Wenn Sie beispielsweise mehrere
a
-Elemente hintereinander notieren, erscheinen diese untereinander und verhalten sich wie Block-Elemente, wenn sie eine derartige Formatdefinition erhalten. Umgekehrt ist es manchmal wünschenswert, Block-Elementen die Charakteristik von Inline-Elementen zu geben. Mit
display: inline;
ist das möglich. So lässt sich etwa ein
address
-Element bequem zu einem Inline-Element umfunktionieren, wenn die Kontaktangaben nicht vom übrigen Text abgesetzt erscheinen sollen, sondern Teil des Textes sind.
13.3.3    Container für Elemente
    Jedes HTML-Element, egal ob Block- oder Inline-Element, »lebt« in einem Container. D. h. es gibt immer ein übergeordnetes Element, das der Bezug für ein gegebenes Element ist. Auch für das oberste Element der HTML-Hierarchie, nämlich das Dokumentelement, markiert durch

…

, gibt es einen Container. Dieser Container wird als Viewport bezeichnet. Letztlich ist das der Anzeigebereich, der einem HTML-Dokument im Browser zur Verfügung