Cascading Style Sheets (englische Aussprache [kæsˌkeɪdɪŋˈstaɪlʃiːts]; für stufenförmige oder (hintereinander) geschachtelte Gestaltungsvorlagen), kurz CSS genannt, ist eine deklarative Sprache für Stilvorlagen (engl. stylesheets) von strukturierten Dokumenten. Sie wird vor allem zusammen mit HTML und XML (zum Beispiel bei SVG) eingesetzt.

Grundidee beim Entwurf von CSS war es, mittels HTML oder XML nur die inhaltliche Untergliederung eines Dokumentes und die Bedeutung seiner Teile zu beschreiben, während mittels CSS weitgehend unabhängig davon die visuelle Darstellung (Farben, Layout, Typografie usw.) der Elemente festgelegt wird. Während zu Beginn der Entwicklung nur einfache Gestaltungsanweisungen möglich waren, wurden später komplexere Module zum Sprachstandard hinzugefügt. Diese erlauben beispielsweise die Definition von Animationen und eine Unterscheidung zwischen verschiedenen Ausgabemedien.

Elemente eines Dokumentes können z. B. aufgrund verschiedener Eigenschaften identifiziert werden; dazu zählen neben dem Elementnamen (z. B. „a“ für alle Linkelemente), ihrer ID und ihrer Position innerhalb des Dokumentes (z. B. alle Bildelemente innerhalb von Linkelementen) auch komplexere Merkmale 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).

Mithilfe von CSS-Regeln können deshalb für jedes Element die konkreten Werte für bestimmte Darstellungsattribute festgelegt werden. Diese Festlegungen können an zentraler Stelle erfolgen, ggf. sogar in einem separaten Dokument, was ihre Wiederverwendung für andere Dokumente erleichtert. Daneben enthält CSS ein Vererbungsmodell für Auszeichnungsattribute – deshalb cascading – das die Anzahl nötiger Definitionen vermindert. CSS ermöglicht allenfalls auch die diskretionäre Auszeichnung von Teilen eines Dokuments.

Mit CSS ist es möglich, für verschiedene Ausgabemedien (Bildschirm, Papier, Projektion, Sprache) unterschiedliche Darstellungen vorzugeben. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen oder für Geräte mit geringerer Auflösung (zum Beispiel PDAs oder Mobiltelefone) die Anzeige mit Rücksicht auf die geringere Seitenbreite und -höhe anzupassen.

CSS gilt heute als die Standard-Stylesheetsprache für Webseiten. Die früher üblichen HTML-Elemente wie font oder center sind als deprecated (veraltet) gekennzeichnet, das heißt, sie sollen in Zukunft aus dem HTML-Standard entfernt werden. Grund ist die durch den Sprachstandard angestrebte Trennung zwischen reinen Inhalten und Stilangaben.

Geschichte und Versionen

Anfänge
Der erste Vorschlag für Web-Stylesheets kam 1993 auf, mehrere weitere folgten bis 1995. Cascading Style Sheets (CSS), wie sie aktuell bekannt sind, wurden 1994 von Håkon Wium Lie vorgeschlagen. Bert Bos arbeitete zu dieser Zeit an der Implementierung eines Browsers namens Argo, der seine eigene Stylesheet-Sprache benutzte. Die beiden entschieden sich, zusammenzuarbeiten und CSS zu entwickeln.
Es gab zu dieser Zeit auch andere Sprachen mit dem gleichen Ziel, die Erfinder von CSS brachten aber als erste die Idee auf, Regeln zu definieren, die über mehrere Stylesheets hinweg vererbt werden konnten.

Nach der Präsentation von CSS durch Lie auf 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. Lie und Bos arbeiteten mit anderen Mitgliedern in diesem Rahmen an CSS weiter. Im Dezember 1996 wurde dann die CSS Level 1 Recommendation publiziert. Diesen Normierungsvorschlag befolgen die aktuellen Browser mittlerweile fast vollständig.

CSS2 und 2.1
CSS Level 2 (CSS2) wurde im Mai 1998 veröffentlicht. Bis heute (Stand: Januar 2010) wird diese Empfehlung von keinem verbreiteten Browser vollständig implementiert. Manche Browser setzen den größten Teil von CSS2 korrekt um, andere hingegen bieten nur eine mangelhafte Unterstützung von wenigen Teiltechniken. Bei der Verwendung im Web ergeben sich daher oft Schwierigkeiten.

Seit 2002 arbeitete das W3C an einer Zwischenversion CSS Level 2 Revision 1 (CSS2.1), die die Erfahrungen mit CSS2 berücksichtigt, Unstimmigkeiten korrigiert und diejenigen Teiltechniken streicht, die bisher in verschiedenen Browsern nicht korrekt implementiert wurden. Am 7. Juni 2011 wurde CSS2.1 als Recommendation veröffentlicht. CSS2.1 bringt selbst keine grundlegend neuen Fähigkeiten mit sich.

CSS3
Seit 2000 ist CSS Level 3 in der Entwicklung. Hier werden die Entwicklungen weiter vorangetrieben, die bereits mit CSS2 begonnen wurden. CSS3 wird im Gegensatz zu den Vorgängern modular aufgebaut sein, womit einzelne Teiltechniken (beispielsweise Steuerung der Sprachausgabe oder Selektoren) in eigenen Versionsschritten entwickelt werden können.

So nähert sich CSS bei seinen Fähigkeiten mehr dem etablierten DSSSL (für SGML) an und wird wohl auch in Zukunft noch eine Alternative zu XML-basierten Stylesheet-Sprachen wie XSL-FO sein. Derzeit veröffentlichte und breit unterstützte Standards sind unter anderem CSS Color Level 3, CSS Namespaces, Selectors Level 3 und Media Queries.

Neben diesen Modulen stehen weitere Elemente zur Diskussion, etwa ein Layout-Modul oder verschiedene Grafikfilter. Moderne Browser unterstützen jedoch schon viele CSS3-Module, die noch nicht durch das W3C standardisiert sind.

Nachfolger
Im Frühjahr 2012 gab es mehrere Berichte, das W3C arbeite an einem Nachfolger von CSS3. Dieser sollte naturgemäß unter der Bezeichnung CSS4 veröffentlicht werden und unter anderem die Selektoren nochmals leistungsfähiger machen und gleichzeitig vereinfachen. Im September 2012 haben Vertreter der entsprechenden Arbeitsgruppe des W3C jedoch klargestellt, dass es CSS4 nicht geben wird: „There will never be a CSS4.“ Vielmehr soll die künftige Entwicklung des Standards in Form einer schrittweisen Aktualisierung der Module von CSS3 geschehen.

Syntax

Der Aufbau von CSS-Regeln,

  Selektor [, Selektor2, …]     {        Eigenschaft-1: Wert-1;
        …
        Eigenschaft-n: Wert-n[;]
     }
 /* Kommentar */
 /* In eckigen Klammern stehen optionale Angaben */

Eine CSS-Regel gibt an, dass für durch sie festgelegte Teile eines Dokuments eine bestimmte, ebenfalls in ihr angegebene Eigenschaftskombination gelten soll. Sie wird geschrieben als eine kommagetrennte Liste von Selektoren („Für diese Typen von Teilen … „), gefolgt von einer in geschweiften Klammern stehenden, semikolongetrennten Liste von Eigenschafts-Deklarationen (“ … nimm alle diese Eigenschaften!“); nach der letzten Eigenschafts-Deklaration ist ein abschließendes Semikolon erlaubt. Eine Eigenschafts-Deklaration besteht aus deren Namen und der Angabe, welchen Wert sie annehmen soll; diese Name-Wert-Paare werden ihrerseits durch einen Doppelpunkt getrennt.

Um diese Teile einer Regel herum ist Weißraum frei verwendbar; häufig schreibt man den Doppelpunkt ohne Zwischenraum hinter den Eigenschaftsnamen, jede Eigenschaftsdeklaration auf eigener Zeile und schließt auch die letzte Eigenschaft mit einem Semikolon – so kommt es zu weniger Syntaxfehlern bei Änderungen. Ein Stylesheet darf beliebig viele solcher Regeln enthalten. Die folgende Tabelle enthält eine vollständige Übersicht aller Selektoren, mit denen Elemente (meist HTML-Elemente) ausgewählt werden können.

Selektoren
Ein Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Satz an CSS-Deklarationen mit seinen Darstellungsvorgaben auf das Element angewendet wird. Solche Bedingungen beschreiben unzweideutig, welche Eigenschaften (Typ, Klasse, ID, Attribut oder Attributwert) Elemente haben müssen oder in welchem Kontext sie im Dokument stehen müssen (Existenz eines bestimmten übergeordneten Elementes oder eines Vorgängerelementes bestimmten Typs), damit die Darstellungsvorgaben für sie gelten sollen. In einem Selektor können mehrere Auswahlkriterien verknüpft sein.

Beispiel
CSS:

p.info {
  font-family: arial, sans-serif;
  line-height: 150%;
  margin-left: 2em;
  padding: 1em;
  border: 3px solid red;
  background-color: #f89;
  display: inline-block;
}
p.info span {
  font-weight: bold;
}
p.info span::after {
  content: ": ";
}

HTML:

<p class="info">
  <span>Hinweis</span>
  Sie haben sich erfolgreich angemeldet.
</p>

Die p-Tags machen den dazwischen stehenden Text zu einem Absatz. Da ihm die Klasse „info“ zugewiesen wird, wird er von einem CSS-kompatiblen Browser entsprechend dargestellt:

Eigenschaftsspezifische Stylesheets (Media Queries)

Bei Media Queries handelt es sich um ein Konzept, welches mit CSS3 eingeführt wurde und das Prinzip des Medientyps in CSS2 erweitert. Anstatt starr zu definieren, welches Medium das Zielmedium ist, können mit Media Queries die Eigenschaften des aktuellen Gerätes direkt abgefragt werden. Verfügbare Geräteeigenschaften sind zum Beispiel:

• Breite und Höhe des Browserfensters
• Breite und Höhe des Gerätes
• Orientierung (Quer- oder Hochformat)
• Bildschirmauflösung

Vor allem im Bereich der mobilen Webprogrammierung werden Media Queries bereits jetzt häufig eingesetzt, um die Webseite ideal an das aktuell verwendete Gerät anzupassen.

Im folgenden Beispiel werden Elemente mit CSS-Regeln versehen. Diese Regeln gelten für das gesamte Dokument. Anschließend wird eine Media Query eingesetzt, die greift, sobald die Breite des Browserfensters kleiner als 1025 Pixel ist. In diesem Fall ändern sich die Eigenschaften, die vorher allgemein definiert wurden bzw. gelten zusätzliche Eigenschaften.

Quelle: Wikipedia (http://de.wikipedia.org/wiki/Cascading_Style_Sheets)