Cascading Style Sheets (CSS)

Nach Möglichkeit sollte der Inhalt einer Seite vom Layout getrennt verwaltet werden.

HTML strukturiert das Dokument. Mit CSS wird es gestaltet.

Mit Cascading Style Sheets (CSS, Stil- oder Formatvorlagen) können Sie ein Dokument gestalten. Eine Style-Deklaration sieht folgendermaßen aus:

Selektor {
  Eigenschaft: Wert;
  Eigenschaft: Wert;
}

Als Beispiel eine blaue Schriftfarbe auf grauem Hintergrund für Absätze:

p {
  color: blue;
  background-color: gray;
}

Die zu gestaltenden HTML-Elemente bilden den Selektor. Mehrere Selektoren werden durch Kommata voneinander getrennt. Innerhalb der geschweiften Klammern folgen nun die Anweisungen, jeweils durch ein Semikolon voneinander getrennt.

Eine Ausnahme bildet lediglich die Inline-Styleanweisung. Hier entfällt die Angabe des Selektors und auch der Klammern.

Es gibt drei Stellen, an denen diese Formatzuweisung erfolgen kann:

1. Inline-Style

In der einfachsten Form geschieht die Formatierung direkt innerhalb der HTML-Anweisung, z.B.:

Eine Überschrift in Rotbraun und kursiv

Der Code dazu: 

<h2 style="color:#A00020; font-style: italic;">
  Eine Überschrift in Rotbraun und kursiv
</h2>

Farben werden übrigens üblicherweise mittels einer Hexadezimalcodierung angegeben.

Das h2-Element bekommt also erst mal die Eigenschaft STYLE. Dieser Eigenschaft wird dann ein Wert zugewiesen. Bitte beachten Sie, gemäss HTML-Syntax geschieht die Wertzuweisung durch ein Gleichheitszeichen und der Wert steht in Anführungszeichen. Alles innerhalb dieser Anführungszeichen gilt als Wert. Es können also der Eigenschaft STYLE mehrere Angaben zugeordnet werden, welche durch ein Semikolon voneinander getrennt werden. Auch muß innerhalb der Anführungszeichen der Doppelpunkt als CSS-typischer Zuweisungsoperator verwendet werden und der Wert folgt ohne Gänsefüßchen (color: #A00020). Alles innerhalb der "Wert-Gänsefüßchen" wird nun der h2-Eigenschaft per Gleichheitszeichen zugewiesen. Eine "Inline"-Formatierung gilt nur für das entsprechende HTML-Tag.

Diese Art der Stylezuweisung sollte jedoch nur in Ausnahmefällen erfolgen, da das Konzept der Trennung von Inhalt und Gestaltung nicht eingehalten wird.

2. Internes Stylesheet

Da sich Variante 1 nur auf das HTML-Element bezieht, in welchem sie steht, sollte sie nur in Ausnahmefällen verwendet werden, wenn z.B. eine bestimmte Formatierung nur an einer einzigen Stelle vorkommt. Üblicherweise wird die Variante 2 (oder gar 3) angewandt. Diese beruht darauf, die Formatanweisungen komplett aus dem Body rauszuhalten und im Head zu notieren. 

<style type="text/css">
<!--
 h2 {
     font-style: italic;
     color: #A00020;
    }
-->
</style>

h2 gilt in diesem Fall als Selektor, auf den sich die in geschweiften Klammern befindlichen Anweisungen beziehen. Leerzeichen und -zeilen sind ohne Bedeutung und dienen lediglich der optischen Auflockerung des Codes. Jedoch ist darauf zu achten, dass die einzelnen Anweisungen durch ein Semikolon voneinander getrennt werden. Man könnte also auch alles in eine Zeile schreiben: 

<style type="text/css">
<!--
 h2 {font-style:italic;color:#A00020;}
-->
</style>

Sie werden jedoch erkennen, dass zumindest bei umfangreicheren Stildefinitionen, egal ob im Head oder extern, die Lesbarkeit des Codes durch uns Menschen am einfachsten ist, wenn sich jede Information oder Wertzuweisung in einer separaten Zeile befindet.

Der Doppelpunkt unmittelbar hinter der Eigenschaft und danach dann ein Leerschritt entspricht der allgemeinen Rechtschreibung, jedoch sind Leerschritte vor und nach dem Doppelpunkt optional.

Die Anweisungen werden als Kommentar ausgezeichnet, damit ältere Browser, die evtl. die STYLE-Anweisung nicht kennen, die Formatanweisungen nicht als Text interpretieren und diesen im Browserfenster darstellen. Mittlerweile dürfte dies nicht mehr notwendig sein, aber sicher ist sicher.

Eine Formatierung wie die folgende bezieht sich sowohl auf alle h2, sowie auf alle h1: 

<style type="text/css">
<!--
 h1,h2 {
        font-style: italic;
        color: #A00020;
        font-family: serif;
        font-size: 24px;
       }
-->
</style>

... und legt neben Schriftschnitt (italic = kursiv) und -farbe auch noch Schriftart (serif) und -größe fest.

3. Externes Stylesheet

Die dritte Möglichkeit besteht darin, die Formatanweisungen in eine externe Datei auszulagern, damit aus mehreren Dokumenten darauf zugegriffen werden kann. Dazu kopieren Sie einfach den Text innerhalb der Kommentarzeichen in eine Textdatei und nennen diese z.B. format.css (wichtig ist die Endung!). Es bietet sich an, CSS-Dateien in ein spezielles Unterverzeichnis zu kopieren. Dies gilt grundsätzlich für alle verschiedenen Dateitypen (wie z.B. auch Bilder), man findet sich dann besser zurecht, wenn die Projekte mal umfangreicher werden. 

 h1,h2 {
        font-style: italic;
        color: #A00020;
        font-family: serif;
        font-size: 24px;
       }

Diese Datei muß nun in den Head des Dokumentes (oder mehrerer Dokumente) eingebunden werden: 

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

Das Attribut 'href' benötigt als Wert den genauen Pfad zur CSS-Datei. Es ist möglich, dass diese in einem anderen Ordner liegt. Siehe auch hier.

Auf diese Art können beliebigen Selektoren (z.B. body, h2, p, table oder auch frei definierbaren Bereichen wie div oder span) bestimmte Formatierungen zugewiesen werden.

Weitere Informationen

Unter www.css4you.de finden Sie eine relativ vollständige CSS-Referenz. Die Website informiert auch insgesamt recht ausführlich und verständlich. Noch etwas umfangreichere Infos finden Sie unter http://de.selfhtml.org/css/

Verschiedene Stylesheets für unterschiedliche Ausgabemedien

Für Bildschirm und Drucker können verschiedene Formatvorlagen referenziert werden. Verwenden Sie dazu die Eigenschaft MEDIA. Die Druckausgabe dieser Seiten ist Schwarz auf Weiß, verwendet eine Serifenschrift und HEADER, NAVI und FOOTER sind ausgeblendet. Ferner fehlen die "Page-Top-Buttons" und die Kenntlichmachung der Hyperlinks, beides hätte nämlich gedruckt keinen Sinn. 

<link rel="stylesheet" href="css/format.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/print.css"  type="text/css" media="print">

W3C-Styles zum ausprobieren

Das W3C hat acht Stylesheets zum ausprobieren erstellt.

<link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Traditional"
  type="text/css" media="screen">

Neben Traditional gibt es noch folgende Varianten:

Einfach im LINK-Element das Wort Traditional durch den gewünschten Namen ersetzen.

CSS Zen Garden

Für den gehobenen Geschmack gibt es unter www.csszengarden.com einige Stylesheets zum staunen, die alle auf derselben HTML-Datei basieren.