HTML Einführung

Cascading Style Sheets (Abk.: CSS) ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML eingesetzt. CSS soll dabei festlegen, wie ein besonders ausgezeichneter Inhalt dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird.

CSS ermöglicht es, die Darstellung dem jeweiligen Ausgabemedium (zum Beispiel Papier, Projektion, Sprache usw.) entsprechend anzupassen. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen, oder um für ein Anzeigemedium wie einen PDA oder ein Mobiltelefon mit geringerer Auflösung die Anzeige zu optimieren (geringere Seitenbreite und -höhe).

Neben diversen, weit über HTML hinausgehenden Fähigkeiten im Farb- und Schriftbereich, die sich allerdings (noch) nicht mit spezialisierten Textsatzsprachen wie TeX messen können, bietet es die Möglichkeit, alle Elemente frei zu positionieren oder Hintergrundbilder festzulegen.

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

Eine CSS-Regel hat folgendes Aussehen:

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

Ein Stylesheet darf beliebig viele solcher Regeln enthalten. Es gibt unter anderem folgende Selektoren, die jeweils Elemente auswählen. Im Wesentlichen sind dies die Tags aus HTML:


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

Als externes Stylesheet für eine (X)HTML-Datei (link-Element)


    <link rel="stylesheet" type="text/css" href="beispiel.css">

Als externes Stylesheet für eine XHTML-Datei (xml-stylesheet-Verarbeitungsanweisung)


    <?xml-stylesheet type="text/css" href="beispiel.css" ?>

Als internes Stylesheet in einer (X)HTML-Datei (style-Element)


    <head><title>Dokument mit Formatierungen>/title>
    <style type="text/css">
      body { color: purple; background-color: #d8da3d; }
    </style></head>

Innerhalb von (X)HTML-Tags (style-Attribut).


    <span style="font-size: small;">Text</span>

Bei uns verwendete CSS-Dateien: