Eine HTML-Datei ist im Grunde genommen nichts anderes als eine hierarchische Verschachtelung von HTML-Elementen. Wenn ein Browser vom Webserver einen Quelltext bekommt, versucht er als
Erstes, sich eine Übersicht über diese Hierarchie zu verschaffen, und erstellt dazu ein Modell.

Der Browser nennt dieses Modell des Quelltextes das »Document Object Model« (abgekürzt DOM), weil es ein Modell der Objekte, also der Dinge auf einer Webseite ist. Wie bei Computern üblich, steht auch dieser Baum auf dem Kopf:

• Das oberste Element einer jeden Webseite ist html. Das Stammelement. Abraham. Der Urvater aller Elemente auf dieser Seite.
• Von html gehen zwei Elemente ab: head und body. Man kann also sagen, dass sowohl head als auch body Kinder von html und somit Geschwister sind. 

Und so ist das ganze HTML-Dokument eine schrecklich nette Familie mit diversen verwandtschaftlichen Beziehungen und Al Bundy in der Rolle des body.

Der DOM-Baum für die Startseite

In Abbildung 11.1 sehen Sie einen Ausschnitt aus dem Baum für die Startseite index.html.

Sie sind kein Browser und müssen nicht für jede Webseite einen solchen Stammbaum entwerfen, aber bei der Planung des Stylesheets oder wenn etwas partout nicht klappen will, ist so ein DOM-Baum manchmal durchaus hilfreich. 

Ob Sie ihn auf Papier skizzieren oder gedanklich im Kopf entwerfen, spielt dabei keine Rolle, wobei für Einsteiger die Papiervariante einfacher sein dürfte.

Abbildung 11.1

Drei Konzepte: Kaskade, Vererbung und Standardwert

Nachdem der Browser den Dokumentenstammbaum erstellt hat, versucht er herauszufinden, wie er die HTML-Elemente im Browserfenster darstellen soll. Dabei muss er für jedes zu gestaltende Element jeder CSS-Eigenschaft einen eindeutigen Wert zuweisen.

Sollte er dabei für eine bestimmte CSS-Eigenschaft genau einen Wert finden, nimmt er ihn. Klare Sache. Wenn es hingegen keinen oder mehrere Werte gibt, helfen dem Browser drei Konzepte bei seiner Entscheidung:

• Kaskade
• Vererbung
• Standardwert

Diese drei Konzepte werden im Folgenden vorgestellt und erläutert.

Beispiel: margin-bottom für #navibereich ul

Im folgenden Abschnitt soll für die Navigationsliste ul der Beispielsite herausgefunden werden, wie viel margin-bottom sie bekommt:

Abbildung 11.2: Wie viel margin-bottom bekommt #navibereich ul?

Die Frage lautet also: »Wie viel unteren Außenrand bekommt die ungeordnete Liste im Navigationsbereich?« Los geht’s. Sie sind der Browser. Los geht es zunächst mit der Sammlung aller relevanten Deklarationen.