Cascading Style Sheets

Datei:Nuvola 64 apps stylesheet.png Cascading Style Sheets /kəˈskeɪdɪŋ staɪl ʃiːts/ (Abk.: „CSS“) ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente (z.B. HTML und XML). Durch die Trennung von Stil und Inhalt wird das Veröffentlichen und Betreuen von Dokumenten wesentlich vereinfacht. CSS wurde vor allem im Hinblick auf HTML entwickelt, ist aber auch für XML-Dokumente anwendbar. CSS ermöglicht es auch, Inhalte nach dem Ausgabemedium (z.B. Druck, Handy) zu ändern. Das ist nützlich, um zum Beispiel Weblinks beim Drucken extra aufzuführen und nicht (wie oft bei HTML-Seiten) zu verbergen. Oder um für ein Anzeigemedium wie ein Handy mit geringerer Auflösung die Anzeige zu optimieren (geringe Seitenbreite und -höhe).

CSS wird vom W3C spezifiziert, die CSS1-Spezifikation (1996) ist in aktuellen Browsern mittlerweile nahezu vollständig umgesetzt. Von CSS2 (1998) sind einige Elemente bereits weit verbreitet (wie zum Beispiel position:absolute), aber einige Fehler und Lücken in den Implementierungen machen die praktische Anwendung schwerer als nötig.

Die Fähigkeiten von CSS sind vielfältig: Neben diversen, weit über HTML 4 hinausgehenden Fähigkeiten im Farb- und Schriftbereich, die sich allerdings (noch) nicht mit spezialisierten Textsatzsprachen wie TeX messen können, bietet es etwa die Möglichkeit, alle Elemente frei zu positionieren, Hintergrundbilder und Vorlesestimmen festzulegen sowie noch einiges mehr.

Das derzeit in Diskussion befindliche CSS3 wird im Gegensatz zu den Vorgängern modular aufgebaut sein, d.h. einzelne Substandards (beispielsweise zur Audiowiedergabe) haben ihren eigenen Entwicklungsrhythmus und Versionsschritte.

CSS gilt heutzutage als die Standard-Stylesheet-Sprache für das Web.

Geschichte

Das Konzept der Cascading Style Sheets (CSS) wurde 1994 durch Håkon Wium Lie vorgeschlagen. Bert Bos arbeitete zu dieser Zeit an der Implementation eines Browsers namens Argo, der seine eigene Style-Sheet-Sprache benutzte. Die beiden entschieden sich zusammenzuarbeiten und CSS zu entwickeln.

Es gab zu dieser Zeit auch andere Sprachen mit dem gleichen Ziel, CSS brachte aber als erstes die Idee auf, Regeln zu definieren, die über mehrere Stylesheets hinweg vererbt werden konnten.

Nach der Präsentation von CSS durch Håkon an der Konferenz „Mosaic and the Web“ in Chicago 1994, und später mit Bos 1995 wurde das World Wide Web Consortium (W3C) auf CSS aufmerksam. Håkon and Bos arbeiteten in diesem Rahmen an CSS weiter, zusammen mit anderen Mitgliedern, u.a. Thomas Reardon von der Firma Microsoft. Im Dezember 1996 wurde dann die Recommendation CSS Level 1 publiziert.

CSS Level 2 (CSS 2) wurde im Mai 1998 veröffentlicht. Die Hersteller der Browser benötigten einige Zeit, um die Empfehlungen zu implementieren. Erst 2004 zeigt sich, dass CSS allgemein auf breiter Basis akzeptiert wird, auch wenn nicht alle großen Browser einheitliche Resultate bei anspruchsvolleren Stylesheets liefern. Eine CSS-2-Unterstützung wird es voraussichtlich für den Internet Explorer ab der im Sommer 2005 erscheinenden Version 7 geben. Mozilla Firefox unterstützt CSS 2 in vollem Umfang

Inzwischen ist CSS Level 3 in der Entwicklung. Hier werden die Entwicklungen weiter vorangetrieben, die bereits bei CSS 2 gestartet wurden. So nähert sich CSS bei seinen Fähigkeiten mehr dem etablierten DSSSL (für SGML) an und stellt wohl auch in Zukunft noch eine attraktive Alternative zu XML-basierten Stylesheet-Sprachen wie XSL dar.

Syntax

Die Syntax besteht aus einzelnen Regeln – Zuweisungen von verschiedenen Deklarationsbereichen, bestehend aus einer oder mehreren Deklarationen, die wiederum aus Eigenschaft und Wert bestehen, zu Selektoren, die z.B. HTML-Elemente sein können:

Selektor { Eigenschaft-A: Wert-A; Eigenschaft-B: Wert-B; } /* Kommentar */

Das Ganze stellt (ohne den Kommentar) eine Regel dar. In den geschweiften Klammern befindet sich der Deklarationsbereich, hier mit zwei Deklarationen. Jede Regel kann beliebig viele Deklarationen enthalten.

Beispiel:

/* Kursiver, grauer Text auf weißem Hintergrund */
p.note {
  font-style: italic; 
  color: gray; 
  background-color: white;
}

Laden eines Stylesheets in einem HTML-Dokument (im HEAD):

<!-- Laden des Stylesheets: stylesheet_name.css -->
<link rel="stylesheet" type="text/css" href="stylesheet_name.css" />

oder:

<style type="text/css">@import "stylesheet_name.css";</style>

Hier wird der Deklarationsbereich allen p-Elementen zugewiesen, die das class-Attribut mit dem Wert note besitzen. Würde man das p im Selektor weglassen, würden alle Elemente mit dem Attributwert note betroffen sein, bei Weglassen des .note alle p-Elemente.

Ein wichtiges Prinzip von CSS ist die Vererbung der Eigenschaftswerte an untergeordnete Elemente und die Kombination verschiedener Stylesheets (Kaskade). Diese können dabei aus verschiedenen Quellen stammen: vom Autor des Stylesheets, dem Browser (User Agent) oder dem Benutzer.

Kombination mit HTML

Die am häufigsten vorkommende Kombination, nämlich mit HTML, kann an drei Orten geschehen:

Als externes Stylesheet
1. für eine HTML-Datei (link-Element),
2. für eine XML-Datei (xml-stylesheet-Verarbeitungsanweisung),
als internes Stylesheet in einer HTML-Datei (style-Element),
innerhalb von HTML-Marken (style-Attribut).

Siehe auch

WAP, Stylesheet, Webtemplates, XHTML, DHTML, DSSSL, XSL(T), JSSS, FOSI, Wikimedia: Eigene Stylesheets für angemeldete Benutzer.

Weblinks

W3-CSS-Home (englisch)
Cascading Style Sheets, Level 2 (deutsche Übersetzung)
Introduction to CSS3
CSS bei SELFHTML
Quirksmode (englisch) bietet Beispiele und Übersichten