Cascading Style Sheets

Über Cascading Style Sheets werden Webseiten formatiert und das Layout festgelegt. Das Extrahieren aller Präsentations-Informationen aus dem Inhalt ist ein Kernpunkt des barrierefreien bzw. barrierearmen Webdesign. Es macht die Website zugänglicher für ein breites Spektrum von Geräten, erleichtert umfangreiche Änderungen, schafft kleinere Dateien und ermöglicht ein bedürfnisorientiertes Anpassen.
Stand 23.04.2010

Inhaltsübersicht:

1. Paradigmenwechsel bei der Webseiten-Gestaltung
2. Style Sheet-Ebenen

Paradigmenwechsel bei der Webseiten-Gestaltung

Über Cascading Style Sheets (CSS) werden die Webseiten formatiert und das Layout festgelegt. Die aktuelle Version ist CSS 2.1. Lange Zeit war es üblich, das Seitengerüst unter Verwendung sog. blinder Tabellen zu erstellen. Diese waren optisch nicht sichtbar, gaben der Webseite jedoch ihre Struktur. Die Anstrengungen des W3C (siehe World Wide Web Consortium) zur Standardisierung sowie die Bereitschaft und Einsicht von Browser-Anbietern, diese Standards strikter einzuhalten, führten zu einem deutlichen Paradigmenwechsel. Die optische Verteilung von Bereichen auf einer Webseite wird bei barrierefreiem bzw. barrierearmem Webdesign nicht mehr über Tabellen realisiert. Statt dessen werden Container (<div>-Elemente) verwendet und über CSS positioniert.

Sinn des Einsatzes von Cascading Style Sheets (auch kurz: Style Sheets) ist das klare Trennen von Inhalt und Layout. Über Style Sheets hat der Entwickler von Webseiten außerhalb des eigentlichen Inhaltes genaue Kontrolle über bspw. Zeichenabstände, Textausrichtung, Objektpositionen, Audio- und Sprachausgabe und Schriftcharakteristiken.

Unter Zuhilfenahme von Style Sheets können für unterschiedliche Ausgabemedien (z.B. Bildschirmansicht, Ansicht auf Mobiltelefonen, Druckansicht) auch unterschiedliche Layouts festgelegt werden (siehe Individuelle Layouts für unterschiedliche Endgeräte).

Seitenanfang

Style Sheet-Ebenen

Es existieren drei Style Sheet-Ebenen, die kaskadenartig ineinander verschachtelt werden können:

• Browser-Style Sheet,
• User-Style Sheet und
• Autoren-Style Sheet.

Das Browser-Style Sheet orientiert sich an den Grundangaben von XHTML: Ein Dokument, dem keine CSS-Datei zugewiesen ist, wird trotzdem in jedem Browser dargestellt. Standardmäßig wird bspw. die Schriftfarbe auf schwarz und die Hintergrundfarbe auf weiß gesetzt, Überschriften werden größer dargestellt, Listen eingerückt.

Das User-Style Sheet ermöglicht ein bedürfnisorientiertes Anpassen. Das User-Style Sheet ist im Normalfall nicht definiert, bietet aber Benutzern die Möglichkeit ein eigenes Style Sheet einzurichten und bspw. für alle Elemente eine größere Schrift oder andere Farbzuweisungen zu definieren.

Das Autoren-Style Sheet gibt den Entwicklern die Möglichkeit, verwendete Elemente zu überschreiben, neu zu definieren und mit speziellen Angaben zu ergänzen. Grundeigenschaften des Browser-Style Sheet, die nicht neu definiert werden, bleiben weiterhin erhalten.

Wichtig ist auch, das Kaskaden-Konzept in unterschiedlichen Element-Ebenen zu beachten. Das Verschachteln von Elementen bewirkt, das innere Elemente die Eigenschaften der äußeren Elemente übernehmen (siehe Das Vererbungsprinzip). Werden den inneren Elementen eigene Zuweisungen zugeteilt, ist diese Vererbung aufgehoben: die innerste CSS-Eigenschaft ist stärker als die umgebende.

Seitenanfang

Seitenanfang