Cascading Syle Sheets (CSS) ergänzen in sinnvoller Weise strukturierte HTML–, XHTML– und XML–Dokumente.

CSS …

• wurde 1994 konzeptionell von Håkon Wium Lie und Bert Bos entwickelt.
• hat das primäre Ziel, eine Trennung von Inhalt/Struktur und Stil/Aussehen zu unterstützen.
• hat in etwa dieselbe Funktion wie Formatvorlagen eines Textverarbeitungssystems.
• ermöglicht elegant die Erstellung eines einheitlichen Layouts von Webdokumenten (Corporate Design).
• ist wiederverwendbar und kann so das zu übertragende Datenvolumen reduzieren.
• kann unterschiedliche Ausgabemedien adressieren (Printdokument, Sprachausgabe, Präsentation, …).
• basiert auf einer Menge sogenannter Regeln.

Es stehen drei Methoden zur Einfügung von CSS–Angaben in (X)HTML Dokumenten zur Verfügung.

1. Einbindung mittels style–Attribut

Das style–Attribut ist ein Universalattribut und ist in nahezu allen HTML Elementen erlaubt. Die Syntax lautet:

<element style="Eigenschaft1:Wert1; ... ;Eigenschaft1:Wert1;" />

Das style–Attribut

• wird auch als Inline–Style bezeichnet.
• wirkt nur auf das jeweilige Element.
• verhindert eine Trennung von Inhalt und Aussehen.

2. Einbindung mittels style–Element

Das style–Element wird innerhalb des Dokumentkopfs head platziert. Es enthält die Stylesheet–Formatdefinitionen.

<style type="text/css"> 
  /* CSS-Regeln */ 
</style>

Mittels des style–Elements definiertes CSS

• gilt innerhalb eines Markup–Dokuments.
• trennt Inhalt und Aussehen.
• ist nicht dokumentübergreifend wiederverwendbar.

3. Einbindung mittels link–Element

Das link–Element wird ebenfalls innerhalb des Dokumentkopfs head platziert. Es enthält einen Verweis auf die externe Datei, welche die Stylesheet–Formatdefinitionen enthält.

<link rel="stylesheet | alternate stylesheet"
      type="text/css"
      media="[media list]" 
      title="[title name]"
      href="[URI of css-file]" />

Mittels des link–Elements definiertes CSS

• trennt Inhalt und Aussehen.
• wirkt dokumentübergreifend und unterstützt so ein einheitlichen Layout mehrerer Webseiten.
• ist leicht auswechselbar.
• unterstützt eine Wahl des Benutzers zwischen verschiedenen Stilen (z.B. http://www.w3.org/Style/) wird vorwiegend wg. seiner Leistungsfähigkeit und Flexibilität eingesetzt.

Die Regel einer Stylesheet Angabe besitzt folgenden syntaktischen Aufbau:

Selektor { 
   Eigenschaft1: Wert1;
   Eigenschaft2: Wert2;
       :           :
   EigenschaftN: WertN;
}

Eine Regel besteht also aus

• einem Selektor oder einer Selektorenliste
• einem Deklarationsblock,
  • der durch ein geschweiftes Klammerpaar begrenzt ist.
  • der keine, eine oder mehrere Deklarationen enthält, welche
    • die Bezeichnung einer Eigenschaft (property)
    • gefolgt von einem Doppelpunkt
    • mit anschließendem Eigenschaftswert (property value) besitzt
    • und von einem Semikolon abgeschlossen wird.

h1, h2, h4                       /* Selektorenliste */
{                                /* Beginn Deklarationsblock */
   color: red;                   /* Deklaration */
   background-color: #9ef;       /*     "       */
   text-align: center;           /*     "       */
}                                /* Ende Deklarationsblock */

Innerhalb von CSS–Angaben sind Kommentare erlaubt, deren Syntax den mehrzeiligen Kommentaren von C, C++, Java, Javascript entspricht.

 /* einzeiliger Kommentar */

 /* mehrzeiliger
    Kommentar    */

Eine Verschachtelung dieser Kommentare ist nicht erlaubt.

Die einzeiligen Kommentare von C++, Java und Javascript werden nicht unterstützt.

Für Farbdefinitionen erlaubt CSS vier Möglichkeiten:

• Farbnamen z.B. color:red
• HEX-Code z.B color:#c0c0c0;
• RGB-Wert z.B color:rgb(255,255,0);
• RGB-Prozentangabe z.B color:rgb(100%,33.3%,0%);

Das Box-Modell definiert die Breite und Höhe von Elementen. Diese ergeben sich aus einer Addition von:

• Breite (width)
• Innenabstand (padding)
• Rahmenstärke (border)
• Aussenabstand (margin)

[Quelle: SelfHTML]

CSS Angaben zur Schriftformatierung beinhalten Schriftarten, Schriftgrößen, Schriftfarben, Schriftgewicht, Zeichen- und Wortabstände.

• font-family (Schriftart)
• font-style (Schriftstil)
• font-variant (Schriftvariante)
• font-size (Schriftgröße)
• font-weight (Schriftgewicht)
• font (Schrift allgemein)
• word-spacing (Wortabstand)
• letter-spacing (Zeichenabstand)
• text-decoration (Textdekoration)
• text-transform (Text-Transformation)
• color (Textfarbe)
• text-shadow (Textschatten)
• font-stretch (Schriftlaufweite)

Neben der Ausrichtung (rechts–, linksbündig), gehören Einzug, Umbruchmodus und Zeilenhöhe zu den absatztypischen Eigenschaften.

• text-indent (Texteinrückung)
• line-height (Zeilenhöhe)
• vertical-align (Vertikale Ausrichtung)
• text-align (Horizontale Ausrichtung)
• white-space (Textumbruch)

CSS etabliert einen Vererbungsmechanismus für hierarchische Auszeichnungssprachen. Demnach vererben äussere Elemente ihre CSS–Eigenschaften an die jeweils innenliegenden.

Somit genügt es also, dem body–Element beispielsweise die Farbe grün zu geben, um mittels Vererbung allen weiteren Kindelementen dieselbe Farbe mitzugeben.

Das 'C' in CSS steht für Cascading. Hierdurch wird dem gleichzeitigen – u.U. konkurrierenden – Einfluss von mehreren externen und internen Autoren– und auch Anwender–Stylesheets Rechnung getragen.

In diesem Zusammenhang wird eindeutig definiert, wie evtl. widersprüchliche CSS Angaben aufzulösen sind.

Beispiel:

color: red;   /* externe CSS Angabe (link) */
color: blue;  /* interne CSS Angabe (style--Element) */
color: green; /* Element CSS Angabe (style--Attribut) */

Im vorliegenden Beispiel hat das style–Attribute den höchsten Stellenwert. Der zugehörige Text hat die Farbe grün.

Information

• W3C CSS
• Cascading Style Sheets, Level 2 (Deutsche Übersetzung der Recommendation).
• CSS bei SELFHTML
• Gute Einführung in CSS
• CSS4YOU

Werkzeuge

• Topstyle – CSS Editor
• Webdeveloper – Firefox Erweiterung