Style Sheets - die Lösung aller Layout-Probleme?

In diesem Kapitel lernst Du, was man nun tatsächlich unter den schon mehrmals in diesem Kurs erwähnten Style Sheets versteht. Wie können sie eingesetzt werden, um Layout und Gestaltung einer Web-Seite zu verbessern? Welche Vorteile bieten sie? Wie werden sie angewendet? Auf diese Fragen versucht das folgende Kapitel Antworten zu geben.

Themen in diesem Abschnitt:

• Das Konzept von Style Sheets
• Die Erstellung von Style Sheets
• Die Angabe der verwendeten Style Sheet-Sprache
• Das grundlegende Aussehen von Style Sheet-Anweisungen
• Die Einbindung von CSS in ein HTML-Dokument
• Inline-Style-Sheet-Anweisungen mit dem Attribut style
• Style Sheet-Anweisungen im Dokumentenkopf mit dem Element STYLE
• Style Sheet-Anweisungen aus einer externen Datei
• Vorrangregeln bei CSS
• Kommentare innerhalb von Style Sheet-Bereichen
• Maßeinheiten und Farbangaben bei CSS
• Mehrere Style Sheets für ein Dokument
• Endlich: Das Kaskadische an Cascading Style Sheets
• Beispielhafte CSS1-Style Sheet-Anweisungen und Referenzen

Das Konzept von Style Sheets

Style Sheets (deutsch: Stilvorlagen) stellen eine unmittelbare Ergänzung von HTML dar. Sie sind eine Sprache, die dazu verwendet wird, um die Formateigenschaften einzelner HTML-Befehle zu definieren. Vom Ansatz her kann man sie mit den Formatvorlagen in Textverarbeitungssystemen wie MS Word vergleichen. Mit Hilfe von Style Sheets ist man zum Beispiel in der Lage, einer Überschrift (egal, welcher Ordnung) eine Schriftgröße von 16 Punkten zuzuordnen, sie in der Schriftart Verdana und kursiv, aber nicht fett erscheinen zu lassen oder ihren Abstand zum folgenden Text als Zentimeterangabe festzulegen. Solche Angaben sind mit dem herkömmlichen HTML nicht möglich.
Die Optionen aufgrund von Style Sheets sind allerdings noch bedeutend vielfältiger. Man kann zum Beispiel beliebigen Bereichen eines HTML-Dokuments Hintergrundfarben oder -bilder sowie diverse Rahmen zuweisen. Man ist in der Lage, beliebige HTML-Elemente oder ein Bereich aus mehreren HTML-Elementen pixelgenau im Anzeigefenster eines WWW-Browsers plazieren. Zum Drucken eines HTML-Dokumentes existieren Befehle zur Definition eines Seitenlayouts. Es ist möglich, bestimmte Ränder, spezielle Aufzählungslistenzeichen, Optionen für die Sprachausgabe oder Spezialfilter festlegen. Die Liste ließe sich noch lange fortsetzen.
Das Grundkonzept von Style Sheets zielt darauf ab, Struktur und Inhalt einer Web-Seite wieder von ihrem Layout zu trennen. Der eigentliche HTML-Code soll entsprechend der Grundkonzeption von HTML möglichst weitgehend frei von Layout-Angaben sein und diese dafür in den Style Sheets bereit gehalten werden.
Definitionen mittels Style Sheets werden zentral angegeben. Damit wird Kodierarbeit eingespart und die Dateien kleiner gemacht. Ein weiterer Vorteil liegt darin, dass, wenn Style Sheets in externen Dokumenten gespeichert sind, sie auch für andere Dokumente einsetzbar sind. Damit ist es möglich, schnell eine einheitliche Formatierung mehrerer Dokumente (zum Beispiel in größeren Projekten) vorzunehmen. Soll das Layout geändert werden, genügt die Veränderung der zentralen Style Sheet-Datei, um gegebenenfalls sehr viele HTML-Dokumente den veränderten Vorstellungen anzupassen. Außerdem ist die Bearbeitung des Layouts unabhängig von der Bearbeitung des Inhalts einer Web-Seite möglich. Nicht zuletzt sind für verschiedene Zielgruppen und/oder verschiedene Darstellungsmedien individuelle Style Sheets verwendbar, die je nach Bedarf automatisch vom Web-Browser oder vom Benutzer ausgewählt werden können. Einem Dokument dürfen also potentiell mehrere Style Sheets zugeordnet werden.

Die Erstellung von Style Sheets

Für die Definition von Style Sheets existieren mehrere spezielle Style Sheet-Sprachen. Die derzeit bekannteste und wichtigste ist die CSS-Sprache. CSS bedeutet Cascading Style Sheets. Diese Sprache wurde vom W3C, der Organisation, die auch für die Normierung von HTML zuständig ist, entwickelt. Deshalb ist die CSS-Sprache optimal auf HTML abgestimmt. Im folgenden wird es speziell um CSS gehen.
Mittlerweile existieren bereits zwei CSS-Sprachversionen: die CSS-Version 1.0 und die CSS-Version 2.0. Problematisch in diesem Zusammenhang ist, dass die gängigen Browser nur einen Teil einen Teil der Befehle der CSS-Version 2.0 interpretieren. Vor allem bei diffizileren Gestaltungsanweisungen geraten die Browser in Schwierigkeiten und geben das so gestaltete Dokument möglicherweise nur fehlerhaft wieder.
Daher sind auch Style Sheets nicht die Lösung aller Layout-Probleme bei Web-Seiten, um die anfangs gestellte Frage zu beantworten. Bisher werden sie von den Browsern noch zu unterschiedlich interpretiert. Es zeichnet sich jedoch ab, dass sich das Konzept der Style Sheets zukünftig stärker durchsetzen wird. Schon deshalb und unter Berücksichtigung der genannten Vorteile lohnt sich die Beschäftigung mit CSS.
In den folgenden Abschnitten wird im wesentlichen die Einbindung von Style Sheets in das HTML-Dokument vorgestellt und die Syntax von CSS1 besprochen. Spezielle Informationen zu CSS findet man auf der Style-Seite des W3C sowie bei seinen Spezifikationen für die Versionen CSS1 und CSS2.

Die Angabe der verwendeten Style Sheet-Sprache

Beim Einsatz von Style Sheets sollte grundsätzlich die verwendete Style Sheet-Sprache im Header des HTML-Dokuments angegeben und damit dem Browser bekanntgemacht werden. Dafür wird das Element META genutzt. Bei Verwendung von CSS sieht das HTML-Markup folgendermaßen aus:

Das grundlegende Aussehen von Style Sheet-Anweisungen

Es gibt drei Varianten, HTML und CSS zu integrieren: über das Attribut style, über das Element STYLE im Dokumentenkopf oder in einer externen Datei (genauere Informationen im nächsten Abschnitt). Ganz allgemein sehen Style Sheet-Anweisungen mit CSS1 folgendermaßen aus:

Zum einen werden die HTML-Elemente, für die die Anweisung gelten soll (= Selektoren), durch Kommata getrennt aufgelistet. Danach werden umschlossen von einer geschweiften Klammer die erwünshcten Style-Angaben, die durch Semikolon getrennt sind, aneinander gereiht (= Deklaration). Die Style-Anweisung an sich besteht aus der Formatierungseigenschaft und dem jeweils zugewiesenen Wert. Die Zuordnung geschieht mittels Doppelpunkt.

In diesem Beispiel werden die Überschriften erster Ordnung dokumentenweit in Arial 18pt formatiert und zentriert, während den Überschriften zweiter und dritter Ordnung die Schriftart Arial 14pt zugewiesen und die Schrift fett dargestellt wird.
Bei der direkten Zuweisung eines Style Sheets durch das Attribut style an ein Element muß man die geschweiften Klammern weglassen und die Formatierungsanweisungen in Anführungszeichen setzen.

Diese Style-Anweisung formatiert den Text des Absatzes in der Schriftart Verdana 12pt und nutzt grün als Textfarbe.
Es existieren auch bei Style Sheets Vorrangregeln. Allgemein gilt, dass eine spezifische Style Sheet-Anweisung Vorrang vor übergeordneten Anweisungen hat. Ausführlichere Informationen findet man im Abschnitt Präferenzregeln für Style Sheet-Anweisungen.

Die Einbindung von CSS in ein HTML-Dokument

Es existieren drei verschiedene Möglichkeiten, um einem HTML-Dokument Style Sheet-Anweisungen zuzuordnen. Dei Auswahl der geeigneten Methode ist abhängig von ihrer Zielsetzung.

1. Inline-Style-Sheet-Anweisungen mit dem Attribut style
2. Style Sheet-Anweisungen im Dokumentenkopf mit dem Element STYLE
3. Style Sheet-Anweisungen aus einer externen Datei

Inline-Style-Sheet-Anweisungen mit dem Attribut style

Beinahe jedem HTML-Element kann das Attribut style (style = Stil, Format)zugeordnet werden. Mit diesem wird eine individuelle Style Sheet-Anweisung erteilt. Man bezeichnet dies auch Schnellformatierung im Text bzw. direkt beim Element:

In diesem Beispiel bekommt der Web-Browser die Anweisung, den folgenden Absatz in der Schriftgröße 14pt und der Farbe rot darzustellen. Solche Inline-Style-Sheet-Anweisungen sollten jedoch möglichst vermieden werden, da sie dem Ziel der Trennung von HTML-Code und Layout-Angaben widersprechen. Das Attribut style ist deshalb nur für Ausnahmefälle vorgesehen, zum Beispiel, wenn in einer vordefinierten Tabelle genau eine Zelle anders hervorgehoben werden soll.

Style Sheet-Anweisungen im Dokumentenkopf mit dem Element STYLE

Im Dokumentenkopf eines HTML-Dokuments kann man mit Hilfe des Elements STYLE Style Sheet-Anweisungen gruppieren und für die im Dokument verwendeten Elemente Gemeinsam definieren. Dadurch erspart man sich die Zuweisung von Styles an jedes einzelne Element. Die Anatomie einer solchen Anweisung sieht wie folgt aus:

Durch den Befehl <STYLE...>...</STYLE> im Kopf des Dokumentes wird der Bereich für die Style Sheet-Angaben festgelegt. Im einleitenden STYLE-Tag muß man den Typ dre Formatdefinition angeben. Zwischen dem einleitenden und dem abschließenden STYLE-Tag können die eigentlichen Style Sheet-Anweisungen definiert werden. Damit (vor allem ältere) WWW-Browser, die keine Style Sheets kennen, nicht durch die fremden Angaben irritiert werden und diese als auszugebenden Text interpretieren, ist es empfehlenswert, den Bereich der eigentlichen Style Sheet-Anweisungen in einen mehrzeiligen Kommentar einzubinden.
Die auf diese Weise im Dokumentenkopf definierten Style Sheet-Angaben sind für dieses eine HTML-Dokument gültig.

In diesem Beispiel wurde die Schriftart, -größe und-farbe der Überschriften erster Ordnung dieses Dokuments formatiert. Außerdem wurde die Schriftart, das Aussehen des Rahmens und die Ausrichtung des Textkörpers festgelegt, der ein Zitat darstellen soll.

Style Sheet-Anweisungen aus einer externen Datei

Als dritte Möglichkeit können Style Sheet-Angaben in eine externe Datei ausgelagert werden. Die Änderungen in dieser separaten Datei wirken sich einheitlich auf alle Dokumente aus, in denen diese Datei eingebunden ist.
Eine derartige Datei ist, vergleichbar mit einem HTML-Dokument, eine reine ASCII-Text-Datei (allerdings ohne HTML-Tags) und besitzt die Datei-Extension *.css. Sie kann daher auch mit einem reinen Texteditor erstellt werden. Diese Datei wird in das HTML-Dokument über das Element LINK eingebunden, welches im Dokumentenkopf plaziert werden muß:

Durch den HTML-Befehl <LINK ...> referenziert man auf die Datei, die die Style Sheet-Anweisungen enthält (link = Verweis). Innerhalb dieses Befehls sollten immer die Angaben REL=stylesheet type="text/css" notiert sein (rel = relation = Bezug, type = Typ). Bei der Angabe href= kann man die gewünschte Datei angeben (href = hyper reference = Hypertext-Referenz). Diese Angabe muß in Anführungszeichen gesetzt werden. An dieser Stelle sind auch relative Pfadangaben (für Dateien in anderen Verzeichnissen) oder absolute URL-Adressen möglich, je nachdem, wo sich die CSS-Datei befindet.

Vorrangregeln für CSS

Für Cascading Style Sheets gelten folgende Präferenzregeln:

• Die Formatierung im Dokumentenkopf hat Vorrang vor der Formatierung durch eine externe Datei.
• Die Schnellformatierung (= Formatierung direkt am Element) hat Vorrang vor der Formatierung im Dokumentenkopf und durch eine externe Datei.
• Alle Style-Formatierungen haben Vorrang vor Formatierungen ohne Styles (Beispiel: H3{text-align:left;} in einer externen CSS-Datei schlägt: <H1 align="center">)

Achtung: Die letzte Präferenzregel gilt nicht bei Formatierungen innerhalb des <FONT>-Tags! Diese haben weiterhin Vorrang!

Kommentare innerhalb von Style Sheet-Bereichen

Für interne Kommentierungen innerhalb der Formatdefinitionen ist die Verwendung folgender Syntax möglich:

Innerhalb von <STYLE...>...</STYLE> kann man mit einem Schrägstrich und einem Sternzeichen in Folge einen Kommentar einleiten, der mit der umgekehrten Zeichenfolge wieder beendet werden muß. Wichtig ist, dass Anfang und Ende des Kommentars in einer Zeile stehen.

Maßeinheiten und Farbangaben bei CSS

Für die Eingabe von numerischen Werten innerhalb von CSS (zum Beispiel Schriftgrößen oder Absatzabständen) ist die Nutzung aller weit verbreiteten Maßeinheiten möglich. Es können sowohl absolute als auch relative Angaben gemacht werden:

pt für Point (= Punkt)
pc für Pica (= 12 Punkt)
in für Inch (= 2,54 cm)
mm für Millimeter
cm für Zentimeter

Relative Angaben:

em für "bezogen auf elementeigene Schrifthöhe"
ex für "bezogen auf elementeigene Höhe des Buchstaben x"
px für Pixel (relative Angabe im Hinblick auf die unterschiedlichen Bildschirmauflösungen bei den Anwendern)
% für Prozent gegenüber Elementnorm

Achtung: Bei CSS gilt stets der Punkt als Dezimalzeichen, nicht das Komma (also zum Beispiel 0.5cm und nicht 0,5cm)!

Farbangaben innerhalb von CSS folgen weitestgehend den Regeln zum Definieren von Farben in HTML. Man kann sowohl die verbreiteten Farbnamen verwenden als auch die Farbwerte hexadezimal nach dem Schema "#XXXXXX" eingeben. Ab der CSS-Version 2.0 ist zusätzlich die Angabe von sogenannten anwender-relativen Farbwörtern möglich. Dabei werden Farben genutzt, die der Anwender an seinem Rechner als Arbeitsumgebung definiert hat, ohne dass man diese Farben kennt. Eine Liste von anwender-relativen Farbwörtern findet man zum Beispiel bei Selfhtml.

Mehrere Style Sheets für ein Dokument

Wie schon erwähnt ist es möglich, einem HTML-Dokument mehrere Style Sheets zuzuweisen. Die Auswahl des geeigneten Style Sheets wird in solchen Fällen normalerweise vom Web-Browser übernommen oder kann dem Benutzer überlassen werden. Das HTML-Markup sieht dann so aus:

Das sogenannte Basis-Style Sheet wird nach dem bereits bekannten Vorgehen spezifiziert. Das Style Sheet, das bei der Auswahl bevorzugt werden soll, erhält zusätzlich einen Namen über das Attribut title. Eventuelle alternative Style Sheets kann man mittels alternate stylesheetkennzeichnen und ebenfalls über title benennen.

Die Style Sheet-Datei basic.css wird in diesem Beispiel in jedem Fall vom Web-Browser geladen. Dann kann der Browser zwischen standard.css und special.css wählen. Er benutzt, wenn keine explizite Wahl getroffen wurde, die Datei standard.css.

Endlich: Das Kaskadische an Cascading Style Sheets

Mit Hilfe von CSS hat man die Möglichkeit, besondere Formate für verschachtelte HTML-Tags zu definieren. Wird nichts anderes angegeben, übernimmt ein HTML-Tag innerhalb eines anderen HTML-Tags dessen Eigenschaften und fügt seine Eigenschaften lediglich hinzu. Wenn man zum Beispiel für eine Überschrift 2. Ordnung die Schriftart Arial, die Schriftgröße 16pt und die Farbe blau festlegt, dann sieht ein Textabschnitt, der innerhalb dieser Überschrift zusätzlich mit <u>...</u> formatiert wurde, ebenfalls blau und in Arial 16pt, aber zusätzlich unterstrichen.
Durch CSS kann man jedoch auch bestimmen, dass ein HTML-Tag bestimmte Eigenschaften nur dann besitzt, wenn es innerhalb eines anderen HTML-Tags notiert ist. So kann man beispielsweise festlegen, dass <u>...</u> innerhalb von Überschriften rot dargestellt wird, während der gleiche Befehl innerhalb anderer HTML-Tags lediglich das Unterstreichen festlegt. Die Syntax sieht dafür folgendermaßen aus:

In diesem Beispiel wird festgelegt, dass Textabschnitte, die innerhalb von Überschriften 2. Ordnung mit dem Tag <u>...</u> ausgezeichnet sind, zusätzlich in der Farbe rot dargestellt werden. An anderer Stelle würde dieses Tag lediglich eine Unterstreichung bewirken. Dafür notiert man zunächst das übergeordnete Tag (im Beispiel H2) und danach, durch ein Leerzeichen getrennt, das untergeordnete Tag (im Beispiel u). Im Beispiel wird diese Spezifikation in der ersten Zeile des <body>-Bereiches genutzt. Als Vergleich wurde in der zweiten Zeile das Tag <u>...</u> in einem anderen Zusammenhang verwendet und zeigt nur seine "normale" Wirkung.
An der folgenden Stelle findet man die Umsetzung dieses Beispiels.

Damit bist Du am Ende des inhaltlichen Teils angelangt. Du solltest nun hinreichend mit Wissen ausgestattet sein, um Dich an einer eigenen Homepage zu versuchen. Bei Fragen stehen wir ( Mirjam und Conny) im Rahmen unserer Möglichkeiten jederzeit gern zur Verfügung. Viel Spass beim Ausprobieren!