Cascading Style Sheets – die Formatierung bekommt Flügel
Was sind Cascading Style Sheets?
Cascading Style Sheets (CSS) sind eine Erweiterung der HTML-Programmierung. Im Wesentlichen eröffnen sie neue Möglichkeiten der Text- und Bildschirmgestaltung und vereinfachen die Programmierarbeit ungemein, indem Formatierungsanweisungen zentral in einer Datei eines Webprojektes abgelegt und darauf zugegriffen werden kann.
Nehmen wir als Beispiel einmal eine einfache Schriftformatierung in reinem HTML vorgenommen. Der Text „Hallo Welt“ soll in einem Absatz in der Schriftart Arial, der Größe 2 und in Fettschrift dargestellt werden. In einem zweiten Absatz soll „Ich lerne jetzt CSS“ folgen.
<p><font face=“arial,helvetica,sans-serif“ size=“2″><b>Hallo Welt</b></font></p>
<p><font face=“arial,helvetica,sans-serif“ size=“2″><b>Ich lerne jetzt CSS</b></font></p>
Man sieht, dass die gleichen Formatierungsanweisungen immer und immer wieder auftauchen. Das ergibt eine Menge Formatierungsballast für eine HTML-Datei. Wenn man sich nun vorstellt, dass eine Homepage auch mal schnell über 1000 Seiten umfassen kann und nach ein paar Jahren vom Aussehen her vielleicht verändert werden soll, dann kann man sich sehr leicht ausmachen, wieviel Arbeit da angesagt ist.
Zentrale Verwaltung der Formatierung mit CSS
Mit CSS ist es nun möglich, Formatierungen zentral für eine Internetseite oder aber auch in einer gesonderten Datei zentral für ein ganzes Web abzulegen. Statt 1000 Seiten zu verändern, modifiziert man immer nur eine einzige Datei. Darüber hinaus können Sie Style-Sheet Angaben auch direkt im HTML-Code vornehmen. Mit Hilfe von CSS bekommen wir nun folgende Formatierung:
<style type=“text/css“>
p.beispiel {font-family:arial,helvetica,sans-serif; font-size:10pt;}
</style>
<p class=“beispiel“>Hallo Welt</p>
<p class=“beispiel“>Ich lerne jetzt CSS</p>
Die CSS-Anweisungen werden innerhalb des HTML-Tags <style></style> definiert. Jede Formatierung erhält einen eigenen Namen – in unserem Fall ist das „beispiel“. Zurückgreifen können auf diese Formatierungen alle „<p>“-Deklarationen im HTML-Code, weswegen das dem Namen, durch einen Punkt getrennt, vorangestellt wird. Die eigentliche Formatierung folgt jetzt in geschweiften Klammern „{}“. Hier könnten auch ohne weiteres noch Anweisungen für Innenabstände, Hintergrundfarben, Außenabstände, Zeilenhöhe und vieles mehr, was in HTML nicht so einfach zu realisieren ist, folgen. Wenn unten nun ein Absatz geöffnet wird, muss man lediglich noch über den Namen „beispiel“ die gewünschte Formatierung ansprechen und schon wird der Text, wie vorgesehen, dargestellt.
CSS-Angaben zentral verwalten
Sollen die Cascading Style Sheet Anweisungen in einer zentralen Datei ausgelagert werden, wird diese Datei im HTML-Kopf notiert und vom Browser angesprochen. URI-Angaben zu Hintergrundbildern u.a. erfolgen immer absolut oder relativ zur ausgelagerten CSS-Datei.
<head>
<link rel=“stylesheet“ type=“text/css“ href=“/stylesheet-datei.css“>
</head>
Der Haken mit den Browsern
Bei so vielen Vorteilen und Möglichkeiten muss die Sache ja einen Haken haben und der liegt bei den Browsern, die einige CSS-Anweisungen teilweise unterschiedlich und teilweise gar nicht interpretieren. Das wird zwar mit jeder neuen Browsergeneration besser, doch muss man beim Programmieren immer auch ein Auge auf die Macken der verschiedenen Browsertypen haben.