CSS: Gestaltung getrennt vom Inhalt

CSS: Gestaltung getrennt vom Inhalt

HTML beschreibt, was ein Inhalt ist. CSS beschreibt, wie er aussieht. Diese Trennung ist der Grund, warum sich das Erscheinungsbild einer ganzen Website an einer einzigen Stelle ändern lässt.

Wie CSS zum Dokument kommt

Drei Wege stehen zur Verfügung: eine externe Datei über ein link-Element im Kopfbereich, ein style-Block im Dokument oder das style-Attribut an einem einzelnen Element. Der Regelfall ist die externe Datei – sie wird einmal geladen und gilt für alle Seiten. Näheres steht im Lexikoneintrag CSS einbinden.

Drei Konzepte, die den Anfang tragen

Selektoren bestimmen, welche Elemente eine Regel trifft – über den Elementnamen, eine Klasse oder eine Kennung. Das Boxmodell erklärt, wie sich Innenabstand, Rahmen und Außenabstand zur Breite eines Elements verhalten. Die Kaskade regelt, welche Regel gewinnt, wenn mehrere zutreffen: Spezifität schlägt Reihenfolge, das style-Attribut schlägt beides.

Wo HTML und CSS sich berühren

An zwei Stellen entscheidet HTML mit. Ohne die Viewport-Angabe im Kopfbereich bleiben alle Regeln für schmale Bildschirme wirkungslos, weil ein Mobilbrowser die Seite in angenommener Desktop-Breite darstellt. Und die Einteilung in Block- und Inline-Elemente stammt aus den Vorgabewerten des Browser-Stylesheets, nicht aus HTML – ein Punkt, der regelmäßig verwechselt wird und im Eintrag Block-Elemente genauer steht.

Der häufigste Anfängerfehler

Gestaltung über Klassennamen zu transportieren, die eine Bedeutung behaupten: eine Klasse namens „button" an einem div macht daraus keine Schaltfläche. Bedeutung steckt im Element, Aussehen in CSS – wer beides vermischt, verliert das eine, ohne das andere zu gewinnen.