CSS steht für Cascading Style Sheets und ist die Sprache, die das Aussehen einer Webseite bestimmt. Während HTML für Struktur und Inhalt zuständig ist, legt CSS fest, wie diese Inhalte dargestellt werden: Farben, Schriften, Abstände, Anordnung und Animationen.
Die Trennung von Inhalt und Gestaltung ist eine der wichtigsten Grundlagen sauberer Webentwicklung. Sie sorgt dafür, dass sich das Erscheinungsbild zentral anpassen lässt, ohne den Inhalt anzufassen. CSS ist auch der Schlüssel zum Responsive Design, bei dem sich das Layout an jede Bildschirmgröße anpasst.
Gut strukturiertes CSS hält eine Webseite schlank und schnell, weil der Browser weniger verarbeiten muss. Damit zahlt es indirekt auch auf die Core Web Vitals ein.
Wie eine CSS-Regel aufgebaut ist
CSS arbeitet mit Regeln aus einem Selektor und einem Block von Deklarationen in geschweiften Klammern, wobei der Selektor die betroffenen Elemente bestimmt und jede Deklaration eine Eigenschaft mit ihrem Wert verbindet. Die Entwicklerdokumentation von Mozilla zeigt dafür das Beispiel h1 { color: red; font-size: 2.5em; }, das alle Hauptüberschriften rot färbt und ihre Schrift auf das 2,5-Fache der umgebenden Schriftgröße setzt. Ein Stylesheet besteht aus vielen solcher Regeln für Überschriften und Absätze bis hin zu ganzen Bereichen der Seite.
Auch ohne eigenes Stylesheet erscheint eine Seite nicht völlig ungestaltet, da jeder Browser grundlegende Standardstile mitbringt. Überschriften werden dadurch größer dargestellt, Absätze erhalten Abstände und Links erscheinen farbig und unterstrichen. Ihre eigenen Regeln ergänzen oder ersetzen diese Grundausstattung, sodass Sie nur festlegen, was vom Standard abweichen soll.
Was die Kaskade bedeutet
Das C in CSS steht für die Kaskade, nach der der Browser bei mehreren unterschiedlichen Angaben zur selben Eigenschaft eines Elements die gültige Regel bestimmt. Bei gleichem Gewicht setzt sich die Regel durch, die im Stylesheet weiter unten steht. Ein Selektor für eine Klasse wie .main-heading wiegt dagegen schwerer als ein Selektor für einen Elementtyp wie h1 und gewinnt auch dann, wenn er weiter oben steht. Hinzu kommt die Vererbung, durch die Angaben zu Farbe und Schriftart vom umgebenden Element auf alle enthaltenen Elemente übergehen, während Breite und Abstände sowie Rahmen nicht vererbt werden.
So setzt der Browser CSS um
Beim Laden einer Seite wandelt der Browser zunächst das HTML in einen Baum aus Elementen um, den sogenannten DOM. Anschließend ordnet er alle CSS-Regeln den von ihren Selektoren erfassten Elementen zu und erzeugt daraus einen Renderbaum für die Darstellung im Fenster. Die Regeln stehen dabei entweder direkt im HTML-Dokument oder in eigenen Dateien mit der Endung .css, auf die das Dokument verweist. Gegliedert ist die Sprache in Module wie das für Hintergründe und Ränder, und zu jedem Modul gehört eine Spezifikation mit genauen Festlegungen für das Verhalten der Eigenschaften.