Bei Cascading Style Sheets (CSS) handelt es sich um eine Sprache zur Definition von Formateigenschaften bestimmter HTML-Elemente und stellen eine Ergänzung zu HTML dar. Mit CSS kann man sehr viele Eigenschaften definieren, die mit reinem HTML nicht möglich wären. Beispielsweise kann man den Außenabstand eines Elements zu einem anderen definieren, eine Startposition von links oder rechts, eine bestimmte Schriftart, einen bestimmten Rahmen (natürlich kann man hier auch die Dicke, Farbe und den Abstand des Rahmens definieren) oder vieles andere. Fast jedes HTML-Element zur Textstrukturierung kann mit CSS Formatiert werden. Man kann beispielsweise auch Hintergrundfarben oder Hintergrundbilder hinter HTML-Elemente setzen.
Die HTML-Elemente kann man auf drei verschiedene Arten formatieren. Entweder direkt im HTML-Element selbst (Beispiel: <p style="padding: 10px 5px 10px 5px;">Textabsatz</p>). Diese Art der Formatierung betrifft nur das Element, das direkt formatiert wurde.
Weiters kann man CSS-Formate zentral in einer Webseite speichern. Dafür muss man im Kopf Bereich des betreffenden Dokuments eine Style-Notation machen. (<style type=“text/css“> Formatierungen </style>). Innerhalb dieser Notation (dieser Tags) sind beliebig viele Formatierungen möglich. Wenn man beispielsweise das Absatzelement „<p>“ wie im obigen Beispiel formatieren will, schreibt man innerhalb des Style-Elements folgendes:
p {padding: 10px 5px 5px;}
Man beachte jedoch, dass diese Formatierung auf alle Absatzelemente („<p>“) im entsprechenden Dokument angewandt wird. Abhilfe kann man schaffen, wenn man Klassen verwendet. Klassen werden mit einem einfachen Punkt eingeleitet und bekommen einen frei definierbaren Namen. Der Name darf allerdings kein HTML-eigener Wortlaut sein (Elementnamen zum Beispiel), ansonsten funktioniert die Deklaration genauso wie wenn man ein einzelnes HTML-Element zentral formatiert. Ein Beispiel zeigt, wie Klassen verwendet werden:
.meineklasse {padding: 10px 5px 10px 5px;}
Diese Klasse lässt sich nun auf ein beliebiges HTML-Element anwenden und betrifft wirklich nur jenes Element, dem diese Klasse zugewiesen wurde. Der Einfachheit halber zeige ich es wieder mit dem Absatzelement:
<p class="meineklasse">Textabsatz</p>
Die dritte und mächtigste Variante, CSS zu verwenden, ist die Möglichkeit Formate in einer separaten Textdatei (mit der Dateiendung „css“) zu definieren. Hier kann man wieder beliebig viele Formatierungen vornehmen und beliebig viele Klassen erstellen. Dabei geht man genauso vor, als würde man die Formate zentral in einer Datei definieren, muss jedoch das so genannte Stylesheet in die Dokumente einbinden, die es verwenden sollen. Dies geschieht wiederum so: Man notiert innerhalb des Kopf-Bereichs ein Style-Element. Innerhalb dieses Style-Elements muss man noch die Import-Anweisung notieren. Damit es auf (praktisch) allen Browsern funktioniert, geht man dabei so vor:
@import url(./src/style.css);
Der in Klammer notierte Ausdruck stellt dabei den Pfad zum Stylesheet dar. Dieser kann relativ oder absolut notiert werden (entweder wie im Beispiel relativ zur Datei oder den absoluten Pfad, beispielsweise http://www.greatstuff.at/greatstuff/src/style.css). Ein so erstelltes Stylesheet kann auf beliebig viele Dokumente angewandt werden.
Mit den hier vorgestellten Möglichkeiten hat man schon ziemlich großen Einfluss auf die Gestalt einer Webseite. Doch es geht noch mehr! Man kann mittels CSS ein komplettes Layout für eine ganze Website erstellen (Wenn Sie dem Link oben folgen, sehen Sie ein solches CSS-Layout, nämlich das von mir geschriebene für http://www.greatstuff.at/). Wie das geht? Es gibt in HTML so genannte Boxen (<div> Elemente). Diese Boxen kann man mit CSS so formatieren, dass ein komplettes Layout entsteht, das eindeutig besser und barrierefreier funktioniert als ein Tabellen- oder Framelayout. Dies ist allerdings nicht ganz so einfach, wie es sich im ersten Moment anhört. Dafür braucht man eine Menge Erfahrung, speziell wenn die Seite auf (praktisch) allen Browsern komplett gleich aussehen soll, gerade wenn man nicht absolute Wertangaben (zum Beispiel „px“, Pixel) verwendet sondern relative. Warum? Browser, gerade der am weitesten verbreitete Browser Internet-Explorer von Microsoft, haben eine Menge Bugs (Programmfehler). Das bedeutet: Nicht jeder Browser interpretiert alle CSS-Formatierungen gleich, manche sind sogar komplett unbekannt. So kennt der IE 6 (Fachjargon für Internet-Explorer der Version 6) beispielsweise Formatelemente wie „min-width“ oder „max-width“ nicht, was für die Verwendung von relativen Wertangaben ein großes Problem darstellt. Aber auch dafür gibt es Abhilfe, mit so genannten Browserweichen kann man dieses Problem in den Griff bekommen. Erst nach vielen langen Nächten war ich endlich soweit, dass mein CSS-Stylesheet für die gängigsten Browser funktioniert und obendrein auch noch W3C-konform war, nur als Beispiel was für einen Arbeitsumfang so ein Stylesheet haben kann! Doch hat man einmal ein funktionierendes Stylesheet, dann liebt man es. Ein solches Stylesheet hat klare Vorteile: Besucht man eine Website, die ein CSS-Stylesheet verwendet, muss dieses Stylesheet nur ein einziges Mal vom Browser geladen werden, wenn der Besucher auf eine Unterseite gelangt, wird das Stylesheet aus dem Browsercache geladen und muss nicht erneut aus dem Internet hinuntergeladen werden. Das beschleunigt die Ladezeit ungemein. Außerdem bietet CSS eine Reihe von Möglichkeiten, eine Sprachausgabe für sehbehinderte Benutzer einzurichten. Doch das Beste an der CSS-Technologie: Eine komplette Website, die auf einem CSS-Layout aufgebaut ist, kann in ihrem Aussehen komplett verändert werden, indem man nur eine einzige Datei editiert.

Kapitelübersicht · Zurück zum vorigen Kapitel · Weiter zum nächsten Kapitel

http://www.informatik.uni-kiel.de/~spa/CssJavaScript.pdf
http://www.oreilly.de/catalog/designjs2ger/chapter/f_Kapitel06.html