Cascading Style Sheets CSS

Cascading Style Sheets CSS (kurz: CSS) bezeichnet eine deklarative Stylesheet-Sprache, mit der das visuelle Erscheinungsbild von HTML- und XML-Dokumenten im World Wide Web definiert wird. CSS regelt Schriftart, Farbe, Abstände, Layouts und Animationen. Damit trennt sie die Präsentationsebene eines Dokuments von dessen Inhalts- und Strukturebene. Die Sprache ist ein zentraler Bestandteil offener Web-Standards.

Definition und grundlegendes Konzept

CSS steht für Cascading Style Sheets, auf Deutsch sinngemäß „kaskadierende Gestaltungsblätter“. Das Adjektiv kaskadierend beschreibt ein zentrales Prinzip. Mehrere Stilregeln verschiedener Herkunft wirken gleichzeitig auf ein Dokument ein: Regeln des Browsers, des Webseiten-Betreibers und gegebenenfalls des Nutzers. Ein definiertes Prioritätssystem – specificity und cascade – führt sie zusammen. Das Ergebnis dieser Rangfolge bestimmt, welche Regel letztlich wirksam wird.

Die Trennung von Inhalt und Darstellung gilt als Grundprinzip moderner Webentwicklung. HTML beschreibt die semantische Struktur: Überschriften, Absätze, Listen. CSS legt ausschließlich fest, wie diese Elemente auf dem Bildschirm, im Druck oder in anderen Medien dargestellt werden. Dieses Prinzip erlaubt es, dasselbe HTML-Dokument durch den Austausch eines Stylesheets vollständig neu zu gestalten.

Geschichte und Standardisierung

Die Idee einer vom Inhalt getrennten Stilsprache für das Web geht auf Håkon Wium Lie zurück. Er legte 1994 einen ersten Entwurf für CSS vor. Gemeinsam mit Bert Bos arbeitete er das Konzept weiter aus. Im Jahr 1995 wurde das World Wide Web Consortium (W3C) auf die Sprache aufmerksam.^[1] Im Dezember 1996 veröffentlichte das W3C die erste offizielle Empfehlung: CSS Level 1. Sie definierte grundlegende Eigenschaften wie Schriften, Farben und einfache Abstände.

Cascading Style Sheets CSS – Entwicklung der Versionen

Auf CSS Level 1 folgten weitere Stufen mit erheblich erweitertem Funktionsumfang. CSS 2 (1998) und die überarbeitete CSS 2.1 führten Positionierungsmodelle, Tabellenformatierung und Medientypen ein. Ab CSS Level 3 wurde der Standard in eigenständige Module aufgeteilt. Jedes Modul – etwa für Selektoren, Flexbox, Grid-Layouts oder Animationen – wird vom W3C unabhängig weiterentwickelt. Eine übergeordnete Versionsnummer „CSS 4″ existiert daher nicht.^[2] Einzelne Module befinden sich auf verschiedenen Reifegraden: Working Draft, Candidate Recommendation oder Recommendation.

Syntax und grundlegende Strukturelemente

Ein CSS-Regelwerk besteht aus zwei Teilen: einem Selektor und einem Deklarationsblock. Der Selektor legt fest, auf welche HTML-Elemente die Regel wirkt. Der Deklarationsblock enthält Eigenschaft-Wert-Paare.

p {
  color: #333333;
  font-size: 1rem;
  line-height: 1.6;
}

Dieses Beispiel weist allen Absatz-Elementen eine Textfarbe, eine Schriftgröße und einen Zeilenabstand zu. Selektoren können auf Tag-Namen, Klassen (.klassenname) oder IDs (#bezeichner) verweisen. Auch komplexe Kombinationen sind möglich. Pseudoklassen wie :hover oder :focus formatieren interaktive Zustände.

Ein weiteres Schlüsselkonzept ist die Vererbung. Viele Eigenschaften – etwa Schriftart oder Textfarbe – übertragen sich automatisch vom Elternelement auf Kindelemente. Das greift, sofern keine abweichende Regel gesetzt ist. Auf diese Weise lassen sich konsistente Designs effizient pflegen.

Einbindung in HTML-Dokumente

CSS kann auf drei Wegen in ein HTML-Dokument eingebunden werden. Am gebräuchlichsten ist die externe Stylesheet-Datei. Sie wird über ein <link>-Element im <head> referenziert und kann auf beliebig viele Seiten angewendet werden. Alternativ enthält ein <style>-Block die Regeln direkt im HTML-Dokument. Die dritte Möglichkeit sind Inline-Stile im style-Attribut eines Elements. Sie besitzen die höchste Spezifität und überschreiben externe Regeln. Wegen ihrer eingeschränkten Wartbarkeit gelten sie jedoch nur in Sonderfällen als empfehlenswert.

Cascading Style Sheets CSS in der modernen Webentwicklung

Heutige Webseiten setzen auf eine Reihe moderner Techniken, die im Rahmen der CSS3-Modulentwicklung eingeführt wurden. Das Flexbox-Modell und das Grid-Layout ermöglichen flexible, zweidimensionale Seitenstrukturen. Beide kommen ohne JavaScript oder Tabellen-Layouts aus. Media Queries passen das Erscheinungsbild dynamisch an die Bildschirmgröße des Endgeräts an – das ist die Grundlage für Responsive Webdesign.

CSS-Variablen (Custom Properties) erlauben die zentrale Definition von Farbwerten, Abständen oder Schriftgrößen. Das sichert projektweite Konsistenz. Animationen und Transitions ersetzen zunehmend JavaScript-Effekte für einfache visuelle Übergänge. Präprozessoren wie Sass oder Less erweitern den Sprachumfang um Schleifen und Mixins. Sie kompilieren in standardkonformes CSS und kommen vor allem in größeren Projekten zum Einsatz.

Abgrenzung zu verwandten Technologien

CSS teilt die Aufgabe der Webseitengestaltung mit JavaScript-basierten Ansätzen wie CSS-in-JS-Bibliotheken. Diese erzeugen Stildefinitionen programmatisch. Anders als reine JavaScript-Lösungen wird CSS direkt vom Browser-Renderer verarbeitet. Das ist typischerweise performanter. Gegenüber Inline-SVG-Stilen oder Canvas-Grafiken bleibt die Stylesheet-Sprache das bevorzugte Mittel für Textgestaltung, Layouts und interaktive Zustände.

Browserunterstützung und Interoperabilität

Alle modernen Browser – Chrome, Firefox, Safari, Edge – interpretieren CSS auf Basis der W3C-Empfehlungen. Historisch führten unterschiedliche Rendering-Engines zu Inkompatibilitäten. Entwickler umgingen sie durch Vendor-Präfixe wie -webkit- oder -moz-. Mit dem zunehmenden Gleichschritt der Hersteller bei der Standardimplementierung sind viele dieser Workarounds heute überflüssig.^[3] Das W3C und das browserherstellerübergreifende Projekt Interop koordinieren die Abstimmung über priorisierte Features. Ziel ist es, Implementierungslücken systematisch zu schließen.

Rolle im Ökosystem offener Web-Standards

Zusammen mit HTML und JavaScript bildet Cascading Style Sheets CSS das technische Fundament des modernen Web. Das W3C definiert diesen Standard als offen und lizenzgebührenfrei. Jeder Hersteller und jeder Entwickler kann ihn frei implementieren. Das ist eine wesentliche Voraussetzung für die weltweite Verbreitung des World Wide Web. Nur so ist die Zugänglichkeit auf unterschiedlichsten Geräten – vom Mobiltelefon bis zum Großbildschirm – dauerhaft gesichert.

Literaturempfehlungen

Eric A. Meyer, Estelle Weyl: CSS: The Definitive Guide – Visual Presentation for the Web. O’Reilly Media, Sebastopol 2023.
Lea Verou: CSS Secrets – Better Solutions to Everyday Web Design Problems. O’Reilly Media, Sebastopol 2015, ISBN 9781449372774.
Bert Bos u. a.: Cascading Style Sheets – Designing for the Web. Addison-Wesley, Boston 2005.