Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) ist ein Fachbegriff aus der Informatik für eine Auszeichnungssprache, die der Beschreibung und Steuerung des visuellen Erscheinungsbilds elektronischer Dokumente dient, insbesondere von Webseiten.

Mit CSS werden u.a. typografische Darstellungs­parameter wie Schriftart (z.B. Times oder Helvetica), Schriftschnitt (z.B. Regular oder Bold), Schriftlage (z.B. gerade oder schräg), Schriftbreiten (z.B. schmal oder breit), Schriftstärken (z.B. mager oder fett), Schriftgrade (z.B. Schriftgrößen in Pixel oder Geviert), Laufweiten (z.B. eng oder weit), Wortzwischenräume (z.B. mehr oder weniger) Schriftfarben (z.B. schwarz #000000 oder weiß #FFFFFF), Zeilenabstände (z.B. Durchschossen oder Splendid), Satzbreiten (Zeilenlängen), Satzspaltenabstände (z.B. Abstände zwischen den Kolumnen) sowie sonstige Parameter eines Layouts von HTML-Elementen definiert.

Charakteristisch ist die konsequente Trennung von inhaltlicher beziehungsweise semantischer Struktur und visueller Präsentation. CSS bildet seit den 1990er-Jahren die gestalterische Grundlage des World Wide Web.

Ursprung und Standardisierung von CSS

Die Entwicklung von CSS geht wesentlich auf den norwegischen Informatiker Håkon Wium Lie (*1965) zurück, der 1994 am CERN (Conseil européen pour la recherche nucléaire – Europäische Organisation für Kernforschung) ein Konzept zur Trennung von Dokumentstruktur und Gestaltung formulierte. In Zusammenarbeit mit dem niederländischen Informatiker und Webstandard-Spezialisten Bert Bos (*1963) wurde dieses Konzept weiterentwickelt und 1996 als erste offizielle Spezifikation (CSS1) veröffentlicht.

Die Standardisierung erfolgt durch das World Wide Web Consortium (W3C), ¹⁾ ein internationales Gremium zur Entwicklung offener Webstandards. Innerhalb des W3C ist die CSS Working Group für die Ausarbeitung und Fortschreibung der Spezifikationen zuständig. Diese werden in Form modularer Erweiterungen veröffentlicht (z.B. CSS2, CSS3 sowie darauf aufbauende Einzelspezifikationen) und kontinuierlich weiterentwickelt.

Gestaltungsprinzip und Arbeitsweise von CSS

CSS ermöglicht die zentrale, konsistente und wiederverwendbare Definition von Gestaltungsregeln. Formatierungen können gezielt einzelnen Elementen, Elementgruppen oder gesamten Dokumenten zugewiesen werden. Die bevorzugte Praxis ist die Verwendung externer Stylesheets, da sie eine saubere Trennung von Inhalt und Gestaltung gewährleisten und eine einheitliche Gestaltung über mehrere Dokumente hinweg ermöglichen.

Darüber hinaus unterstützt CSS medienabhängige Ausgabeszenarien sowie responsive Gestaltungskonzepte. Inhalte können damit abhängig vom Ausgabemedium (z.B. Bildschirm, Druck) oder von Geräteeigenschaften (z.B. Displaygröße) unterschiedlich dargestellt werden.

Aufbau einer CSS-Regel

Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock. Der Selektor bestimmt, auf welche Elemente eine Regel angewendet wird. Der Deklarationsblock enthält eine oder mehrere Eigenschaft-Wert-Zuweisungen, die durch Semikolons voneinander getrennt sind. Beispielsweise bewirkt nachfolgende Regel, dass Überschriften der Ebene h1 in roter Farbe und mit einer Schriftgröße von 12 Pixeln dargestellt werden:

h1 {
color: #FF0000;
font-size: 12px;
}

Auswahl von typografischen CSS-Eigenschaften: ²⁾

Einbindung in HTML-Dokumente

CSS kann auf drei Arten in HTML-Dokumente eingebunden werden:

• • als externes Stylesheet (empfohlene Methode),
  • als internes Stylesheet im head-Bereich eines Dokuments,
  • als Inline-Style direkt im Start-Tag eines Elements.

Externe Stylesheets gelten als Standardlösung, da sie strukturelle und gestalterische Aspekte strikt trennen und eine hohe Wiederverwendbarkeit gewährleisten. Interne Stylesheets sind auf ein einzelnes Dokument beschränkt, während Inline-Styles ausschließlich auf einzelne Elemente wirken und typografisch wie strukturell als nachrangig gelten.

CSS-Boxmodell und Layoutprinzip

Ein grundlegendes Konzept von CSS ist das sogenannte Boxmodell. Jedes Element wird als rechteckige Fläche verstanden, die sich aus vier Bereichen zusammensetzt: Inhalt (content), Innenabstand (padding), Rahmen (border) und Außenabstand (margin). Dieses Modell bildet die Grundlage für die Steuerung von Abständen, Proportionen und Layoutstrukturen und ist damit zentral für die visuelle Organisation von Webinhalten.

© Wolfgang Beinert, www.typolexikon.de