Cascading Style Sheets (englisch für gestufte Gestaltungsbögen), kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und DOM eine der Kernsprachen des World Wide Webs. Sie ist ein so genannter «living standard» (lebendiger Standard) und wird vom World Wide Web Consortium (W3C) beständig weiterentwickelt. Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit den Auszeichnungssprachen HTML und XML (zum Beispiel bei SVG) eingesetzt werden.

---

Grundlagen

CSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben, während mit CSS gesondert davon, vorzugsweise in separaten CSS-Dateien, die Darstellung der Inhalte festgelegt wird (z.B. Layout, Farben und Typografie). Gab es anfangs nur einfache Darstellungsanweisungen, so wurden im Verlauf komplexere Module hinzugefügt, mit denen z.B. Animationen und für verschiedene Ausgabemedien verschiedene Darstellungen definiert werden können.

Elemente eines Dokumentes können aufgrund verschiedener Eigenschaften identifiziert werden. Dazu zählen neben dem Elementnamen (z.B. a für alle Hyperlinks), ihrer ID und ihrer Position innerhalb des Dokumentes (z.B. alle Bildelemente innerhalb von Linkelementen) auch Details wie Attribute (z.B. alle Linkelemente, deren href-Attribut mit www.example.com beginnen) oder die Position in einer Menge von Elementen (z.B. das 7. Element einer Liste). Mit CSS-Anweisungen können für jede solcher Elementegruppen Vorgaben für die Darstellung festgelegt werden. Diese Festlegungen können zentral erfolgen, auch in separaten Dateien, so dass sie leichter für andere Dokumente wiederverwendet werden können. Ausserdem enthält CSS ein Vererbungsmodell für Auszeichnungsattribute, das die Anzahl erforderlicher Definitionen vermindert.

Mit CSS können für verschiedene Ausgabemedien (Bildschirm, Papier, Projektion, Sprache) unterschiedliche Darstellungen vorgegeben werden. Das ist nützlich, um z.B. die Verweisadressen von Hyperlinks beim Drucken aufzuführen, und um für Geräte wie PDAs und Mobiltelefone, die kleine Displays oder eine geringe Bildauflösung haben, Darstellungen anzubieten, die schmal genug und nicht zu hoch sind, um auf solchen Geräten lesbar zu bleiben.

---

Syntax

Eine CSS-Anweisung (englisch rule) gibt an, dass für festgelegte Teile eines Dokuments eine Kombination von bestimmten Eigenschaften gelten soll. Geschrieben wird sie als eine durch Kommata getrennte Aufzählung von Selektoren («Für diese Typen von Teilen …»), gefolgt in geschweiften Klammern von einer semikolongetrennten Liste von Eigenschafts-Deklarationen («… nimm die folgenden Eigenschaften!»). Jede Eigenschaftsdeklaration besteht aus der Bezeichnung der Eigenschaft, einem Doppelpunkt, und dem Wert, den sie annehmen soll. Nach der letzten Eigenschaftsdeklaration ist vor der schliessenden, geschweiften Klammer ein abschliessendes Semikolon erlaubt, aber nicht notwendig. Der Aufbau von CSS-Anweisungen ist rechts abgebildet.

Um diese Teile einer Anweisungen herum ist Leerraum frei verwendbar. Häufig schreibt man den Doppelpunkt ohne Zwischenraum hinter den Eigenschaftsnamen, jede Eigenschaftsdeklaration in eine eigene Zeile, und schliesst auch die letzte Eigenschaft mit einem Semikolon. So kommt es bei späteren Änderungen weniger leicht zu Syntaxfehlern.

Ein Stylesheet darf beliebig viele solcher Anweisungen enthalten. Die folgende Tabelle enthält einfache Selektoren, mit denen Elemente (meist HTML-Elemente) ausgewählt werden können. Daneben gibt es noch weitere Selektoren, genannt Kombinatoren, Pseudoklassen, strukturelle Pseudoklassen und Pseudoelemente.