Inhaltsverzeichnis

1 Wozu braucht man Cascading Style Sheets?

In HTML, der üblichen Auszeichnungssprache für Webseiten, gibt es Befehle für Überschriften, Absätze, Tabellen, Hyperlinks, Grafikreferenzen etc. . Außerdem gibt es Befehle zur optischen Auszeichnung von Text, etwa für fett, kursiv oder unterstrichen, sowie ein paar andere Befehle, wie z.B. einen, der es erlaubt, die Textgröße einzustellen.
Das Formatieren von Seiten mit diesen Befehlen ist jedoch sehr umständlich und besonders die Verwendung solcher Befehle bei größeren Webseiten, kann ein HTML-Dokument sehr unübersichtlich machen. Außerdem ist es sehr schwierig solche Seiten an kleinste Layout-Änderungen anzupassen.
Für die individuelle Formatierung von HTML-Elementen sind Cascading Style Sheets(CSS) sehr gut geeignet.
Mit Hilfe von CSS kann man nun HTML-Elemente viel einfacher bzw. übersichtlicher gestalten: Man kann unter anderem die genaue, vom Browser unabhängige Schriftgröße angeben, man kann den Schrifttyp angeben, die Schriftfarbe etc. . So kann man z.B. bestimmen, daß Überschriften 1. Ordnung eine Schriftgröße von 16 Punkten haben, in der Schriftart Helvetica, aber nicht fett erscheinen, und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden.
Man kann HTML-Elemente, gleichgültig ob Textabsätze, Listen, Tabellenzellen oder Formulare, mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild oder mit diversen Rahmen ausstatten. Man kann Elemente pixelgenau im Anzeigefenster des WWW-Browsers positionieren. Für Print-Layouts stehen Möglichkeiten zur Definition von Seitenlayout und Textflusskontrolle bereit. CSS ermöglicht Layouts, die keine Entsprechung im HTML-Standard finden. So ist z.B. die Überlappung von Textbereichen mit reinem HTML nicht möglich.
Ein weiterer und größerer Vorteil von CSS ist, daß man Formatierung und Inhalt trennen kann. So kann man beispielsweise im Kopf einer HTML-Datei Regeln zur Anzeige einer Tabellenzelle notieren. Alle Tabellenzellen der entsprechenden HTML-Datei erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Arbeit, macht die HTML-Dateien kleiner und den HTML-Code übersichtlicher. Insbesondere ist eine eventuell notwendige Layoutänderung von Dokumenten mit CSS einfacher und weniger fehleranfällig, als bei HTML-Dokumenten ohne CSS, da man bei CSS Elementeigenschaften am Dokumentkopf definieren kann und bei Änderungen nur die Befehle am Dokumentkopf ändern braucht. Somit bleibt bei Änderungen die einmal aufgebaute Struktur eines Elements erhalten, was bei Änderungen an HTML-Dokumenten ohne CSS oft nicht der Fall ist.
Es besteht auch die Möglichkeit CSS-Regeln in separaten Dateien zu notieren. Die Stylesheet-Dateien kann man dann in beliebig vielen HTML-Dateien referenzieren. Somit kann man für große Projekte einheitliche Layouts entwerfen, die man dann beliebig oft verwenden kann. Das spart beim Entwurf von Webseiten viel Zeit und ist somit auch ein großer Vorteil.
CSS bietet einem also unter anderem die Möglichkeit Textauszeichnung und Gestaltung voneinander zu trennen, d.h. CSS-Anweisungen dienen der optischen Steuerung einer Webseite, während die HTML-Anweisungen ausschließlich der logischen Gliederung einer Webseite dienen.

2 Die Syntax von CSS

2.1 CSS - Regeln

Als einführendes Beispiel wollen wir hier zwei CSS-Regeln zeigen. Diese sollen dem Leser nur eine Vorstellung von den Möglichkeiten von CSS geben. Eine systematische Beschreibung und Hintergrunderläuterung zu CSS-Regeln geschieht später in dieser Ausarbeitung. Ein Cascading Style Sheet besteht aus mindestens einer Regel. Wir zeigen zunächst in einem Beispiel, in der eine Überschrift 1.Ordnung (h1) formatiert werden soll, wie eine Regel aussieht. Eine Regel hat meistens folgende Form:
h1 { font-style: italic }

Kursive Überschrift

Hier kann man die Unterteilung einer CSS - Regel in zwei Teile sehen, nämlich den Selektor (in diesem Beispiel 'h1') und die Deklaration (hier: 'color: blue'). Mit dem Selektor wählt man die HTML-Elemente aus, auf die die Regel angewendet werden soll. In der Deklaration legt man für eine Eigenschaft (property, hier: 'color') dieses HTML - Elements einen Wert (value, hier: 'blue') fest.
h1 {
  font-weight: bold;
  font-size: 12pt;
  font-family: Arial;
  font-variant: normal;
  font-style: normal;
}
Deklarationen lassen sich auch gruppieren, damit man für jede Eigenschaft eines HTML-Elements nicht den Selektor noch einmal aufschreiben muss. Dazu werden nach der öffnenden geschweiften Klammer '{' einfach alle Deklarationen hintereinander aufgeschrieben und durch Semikolons getrennt, wobei zusätzlicher Whitespace (Leerzeichen, Tabulatoren und Zeilenumbrüche) zwischen den Deklarationen erlaubt ist: Die unterschiedlichen Attribute werden später im Text noch beschrieben.

Überschrift 12 Punkte, Schriftart Arial, Bold

2.2 Einbindung von CSS in HTML

Formate können zentral definiert werden und sie können aus einer separaten CSS-Datei eingebunden werden. Unabhängig davon, ob man Formate zentral definiert oder sie aus einer separaten Datei einbindet, kann man auch einzelne HTML-Elemente formatieren.
In diesem Abschnitt werden die verschiedenen Formatierungstechniken erläutert.

2.2.1 Das Formatieren einzelner HTML-Elemente

Hier werden die Deklarationen direkt dem 'style'-Attribut eines HTML-Elements zugewiesen. Sie stehen also dort, wo sie auch ihre Wirkung haben.
Einzelne Deklarationen werden durch Semikolons voneinander getrennt, die Reihenfolge der Deklarationen ist hierbei unbedeutend.
Die Formatierung wirkt sich nur auf dieses eine HTML-Element z.B. <h1 style="color: red">...</h1> aus. Enthält die Datei noch weitere Elemente desselben Typs, sind diese von der Formatierung nicht betroffen.
Allgemeine Definition:
<html-tag style= "[CSS- Deklarationen]">...</html-tag>
Beispiel:
<h1 style="font-family: courier;">Courier</h1>
Bemerkung: Falls es in einer CSS-Regel im Dokument-Kopf oder in einem separaten Stylesheet Regeln für die Schriftart von Überschriften 1. Ordnung gibt, haben diese Formatbefehle keinen Einfluss auf die Schriftart der obigen Überschrift. Das bedeutet, direkt dem einzelnen zugewiesene CSS-Angaben überschreiben alle anderen Definitionen. Mehr dazu werden wir im Kapitel 'Die Kaskade' genauer erläutern.
Beispiel:
<html>
 <head>
   <style type="text/css">
     h1 {font-family: Arial, Helvetica; font-size: 15pt;}
   </style>
 </head>
 <body>
   <h1 style="font-size: 15pt; font-family: courier;">Courier</h1>
   <h1>So hätte die obige Überschrift ohne explizite
       Formatierung am einleitenden Tag ausgesehen</h1>
 </body>
</html>

Courier

So hätte die obige Überschrift ohne explizite Formatierung am einleitenden Tag ausgesehen


In diesem Beispiel hat die Überschrift erster Ordnung den Schrifttyp Courier New, obwohl im Dokument-Kopf für alle Überschriften erster Ordnung der Schrifttyp Times New Roman definiert wurde.
Es sind auch mehrere Wertzuweisungen zu einer Eigenschaft möglich. Somit kann man auch Alternativen angeben, was z.B. bei der Schriftart empfehlenswert ist. Benutzt der Autor einer Seite eine Schriftart, die auf dem Computer des Lesers nicht installiert ist, muss das System dafür einen Ersatz finden. Dies sieht u.U. nicht nur unschön aus, sondern kann die Seite geradezu unleserlich machen. Um dies zu vermeiden, ist es sinnvoll, zumindest ein oder zwei gebräuchliche Schriftarten als Alternativen anzubieten. Besonders empfehlenswert ist es, als letzte Alternative keine feste Schriftart vorzugeben, sondern eine generische Schrift festzulegen.
Beispiel:
font-family: Arial, sans-serif;
In diesem Beispiel wird die Schriftart Arial vorgegeben. Fall diese auf dem Computer des Lesers nicht installiert ist, soll eine serifenlose Schrift verwendet werden.

2.2.2 CSS-Regeln im Dokument-Kopf

Mit Hilfe von zentralen Elementen kann man die Gliederung einer Webseite sauber von ihrem Inhalt zu trennen. Zentrale Elemente sind CSS-Regeln, die man am Kopf eines HTML-Dokuments mit Hilfe des 'style-Elements definiert.
<style type="text/css">
selektor
{
  css-Deklarationen
}
</style>
Mit <style type="text/css"> im Kopf der HTML-Datei wird die Definition der zentralen Elemente eingeleitet und mit </style> wird sie abgeschlossen. Dazwischen stehen dann beliebig viele CSS-Regeln.
Beispiel:
<head> 
<style type="text/css"> 
  p  {font-size: 14pt; font-family: "Time New Roman"; }
  h1 {font-family: Arial; font-style: italic; }
  h2 {font-family:  Courier, monospace; font-weight: bold;} 
  h3 {font-family: Arial, Helvetica;}
</style> 
</head>
Will man ein Format für mehrere HTML-Elementtypen definieren, so gibt man alle gewünschten Elementtypen an und trennt diese durch Kommata.
Beispiel:
<head> 
 <style type="text/css"> 
 p, h1, h2 {font-size: 15pt; 
            font-family: "Premier Free Style DB";
            font-style: italic;}
 </style> 
 </head>

2.2.3 Formatvorlagen verwenden

Falls eine Website mehrere Seiten enthält und diese gleiche oder ähnliche Layoutierungen haben, ist es oft sehr mühsam, für jede Seite die gleiche Formatierungsbefehle in den Dateikopf zu schreiben.
Besonders eine kleine Layoutänderung erweist sich als sehr mühsam und zeitaufwendig, da man dann im Dateikopf jeder Seite die gleichen Formatbefehle ändern muss.
Die Cascading Style Sheets sehen hierfür Formatvorlagen vor. Formatvorlagen sind separate Dateien, die Style Sheet Befehle in Form zentraler Formate enthalten. Diese Befehle unterscheiden sich nicht von den zentralen Formaten am Dokument-Kopf eines HTML-Dokuments.
Diese Formatvorlagen werden dann mit dem Link-Befehl oder mit dem @-import Befehl am Dokument-Kopf referenziert.

Der Link-Befehl

Allgemeine Definition:
<link rel="stylesheet" type="text/css" href="[url]">
Wobei [url] eine Referenz auf die zu verwendende Style Sheet-Vorlage ist.
Beispiel:
<html>
 <head>
   <link rel="stylesheet" type="text/css" href="formatvorlage.css" />
 <body>
   <h1> ArtNouveau, fett </h1>
   <h2> Courier New, monospace, kursiv </h2>
   <h3> Times New Roman </h3>
 </body>
</html>
Datei formatvorlage.css:
h1 {font-family: ArtNouveau; font-weight: bold;}
h2 {font-family: "Courier New", monospace; font-style: italic;}
h3 {font-family: "Times New Roman";}
Das 'link'-Element wird im Kopf der HTML-Datei angegeben und stellt eine Referenz zu einer anderen Datei her. Da das 'link'-Element nicht CSS-spezifisch ist, muss dem Browser mitgeteilt werden, um welche Art von Daten es sich handelt. Dies geschieht mit dem Attribut rel="...". Als Wert wird dem Attribut der Dateityp mitgegeben, welcher für Style-Sheet-Dateien immer 'stylesheet' lautet. Wenn der WWW-Browser auf einen solchen Befehl stößt, fordert er die referenzierte Datei vom Server an. Der WWW-Browser weiß anhand des Befehls rel="stylesheet", wie er den Inhalt der externen Datei zu verarbeiten hat. In diesem Fall erwartet er Formatbefehle.
Das Attribut type="..." teilt dem Browser mit, in welcher Form die Daten vorliegen. In diesem Fall handelt sich um eine Textdatei mit CSS-Regeln. Man kann mehr als eine Vorlagendatei verwenden. Dafür muss jede Formatvorlage mit einem separaten <link>-Befehl referenziert werden. Man sollte versuchen die Formatvorlagen so zu erstellen, dass sich die Befehle der Vorlagen nur ergänzen und nicht überschneiden. Falls man eine Überschneidung der Befehle nicht verhindern kann, haben die Definitionen der letzten Formatvorlage vor allen vorhergegangenen Vorrang.
Beispiel:
<html>
 <head>
   <link rel="stylesheet" type="text/css" href="formatvorlage.css" />
   <link rel="stylesheet" type="text/css" href="formatvorlage2.css" />
 </head>
 <body>
   <h1> ArtNouveau, kursiv </h1>
   <h2> Courier New, monospace, kursiv </h2>
   <h3> Times New Roman </h3>
 </body>
</html>
Datei formatvorlage2.css
h1 {font-family: ArtNouveau; font-style: italic;}

Die @import-Regel

Die Regel @import hat eine ähnliche Funktion wie das <link>-Element für das Einbinden von Formatvorlagen.
Allgemeine Definition:
@import url("[url]");
Mit @import kann man nicht nur innerhalb eines <style>-Elements verwenden, um in einer externen Datei abgelegte CSS-Befehle einzubinden, man kann ihn auch innerhalb von Formatvorgaben benutzen, um damit Vorlagendateien in andere Vorlagendateien einzubinden. Diese macht dann Sinn, wenn gewisse CSS-Deklarationen für alle Medien identisch sein sollen, z.B. die Größe der Überschriften. Diese CSS-Deklarationen können dann zentral in einer anderen CSS-Datei abgelegt werden und mittels anderer Vorlagedateien integriert werden.
@import und der Link-Befehl können auch mit anderen CSS-Angaben kombiniert werden.
Beispiel:
@import url("farbe.css");
h1{ font-family: Arial;}
h2{ font-family: "Times New Roman";}
Hier wird die Vorlagendatei, für die Formatierung der Schriftfarbe (farbe.css) in diese Vorlagendatei eingebunden.

Beachte: Der Nachteil der @import-Regel ist, dass sie von Netscape 4.x ignoriert wird.

2.2.4 Medienabhängige CSS-Definitionen

Die @media-Regel

Meistens werden HTML-Dokumente für die Ausgabe am Bildschirm formatiert. Doch ein gutes Layout für die Ausgabe am Bildschirm ist oft nicht gut für eine Ausgabe am Drucker. Während z.B.am Bildschirm helle Schrift auf dunklem Hintergrund attraktiv aussieht, ist dies für die Ausgabe am Drucker keine gute Lösung. Außerdem gewinnen mit zunehmendem Maße auch andere Ausgabemedien wie z.B. Handhelds an Bedeutung. Diese Medien stellen unterschiedliche Bedürfnisse an ein Layout und die Cascading Style Sheets bieten die Möglichkeit medienabhängiger CSS-Definitionen.
Man kann mit Hilfe der CSS-Regel @media bei der Definition der Formate die Reichweite auf eines oder mehrere Medien beschränken.
Allgemeine Definition:
@media [Medientypen, durch Kommata getrennt] {CSS-Deklarationen}
Die CSS-Regel @media leitet die Definition zentraler Elemente ein, die ausschließlich für den oder die angegeben Medientypen gelten. Der Medientyp wird mit seinem Namen direkt hinter @media angefügt. Falls die Formate für mehrere Medien gelten sollen, werden die Namen der Medien durch Kommata getrennt nacheinander aufgelistet, wobei die Reihenfolge der Angaben zu den Namen keine Rolle spielt. Direkt darauf folgen dann die geschweiften Klammern, die die entsprechenden CSS-Befehle umschließen.
Die @media Regel kann im Kopf einer HTML-Datei innerhalb des <style>-Befehls angegeben werden, aber auch innerhalb einer externen Vorlagendatei. Außerdem sind auch mehrere @media-Blöcke möglich.
Beispiel:
<style type="text/css">
@media handheld
{ 
  h1 { font-size: 10pt; }
} 

@media screen, print 
{ 
  h1 { font-size: 14pt; }
}
  ...
</style>
In diesem Beispiel haben Überschriften 1.Ordnung beim Druck und auf dem Bildschirm die Schriftgröße 14pt, während sie auf einem Handheld die Schriftgröße 8pt haben.
Es können auch mehrere Blöcke mit Formatbefehlen zu einem Medium definiert werden. Man sollte jedoch darauf achten, dass sich die CSS-Regeln nicht widersprechen.

Formatvorlagen für verschiedene Ausgabemedien

Es besteht auch die Möglichkeit, für verschiedene Ausgabemedien unterschiedliche Formatvorlagen einzubinden, die unterschiedliche Formatdefinitionen enthalten können. Der User Agent muss dann beim Präsentieren der Seiten entscheiden, welche der eingebundenen Formatvorlagen maßgeblich ist.
Diese werden wie üblich referenziert. Der Link-Befehl hat jedoch noch das zusätzliche Attribut 'media', das bestimmt, für welches Ausgabemedium die eingebundene Formatvorlage verwendet werden soll.
Beispiel:
<head>
  <link rel="stylesheet" type="text/css"  
        media="screen" href="bildschirm.css"> 
...
</head>
Die CSS-Datei 'bildschirm.css' wird hier für das Ausgabemedium 'screen', also die Ausgabe am Bildschirm verwendet.
Man kann im 'media'-Attribut auch eine Liste von Medientypen angeben. Diese werden dann durch Kommata getrennt.
Beispiel:
<head>
  <link rel="stylesheet" type="text/css" 
        media="print,screen" href="ausgabe.css" />
  <link rel="stylesheet" type="text/css" 
        media="handheld" href="handheld.css" />
  ...
</head>
Die CSS-Datei 'ausgabe.css' wird hier für die Ausgabemedien Drucker und Bildschirm verwendet.

Die @import-Regel für unterschiedliche Ausgabemedien

Ähnlich wie beim 'link'-Element können auch mit Hilfe der @import-Regel verschiedene Formatvorlagen für unterschiedliche Ausgabemedien eingebunden werden.
Allgemeine Definition:
@import url("[url] ") [Durch  Kommata getrennte Liste von Medientypen];
wie man sieht, wird die @import-Regel einfach am Ende durch Angabe des Medientyps/der Medientypen ergänzt.
Beispiel:
@import url("handheld.css") handheld;
@import url("ausgabe.css") print,screen;
Die CSS-Datei 'handheld.css' wird hier für das Ausgabemedium 'handheld' verwendet, während die CSS-Datei 'ausgabe.css' für die Ausgabemedien 'print' und 'screen' verwendet wird.

Medientypen

CSS1 unterscheidet im Gegensatz zu CSS2 nicht zwischen Medientypen. In CSS2 gibt es folgende Medientypen:
all Umfaßt alle Medientypen. Diese Angabe kann auch weggelassen werden.
screen Der Medientyp für die Anzeige auf einem Computer-Bildschirm.
print Hier gilt die CSS-Datei für den Ausdruck auf Papier. Web-Browser sollten diese Formatdefinitionen verwenden, wenn der Anwender die Web-Seite ausdrucken möchte.
braille Dieser Medientyp gilt für Ausgabegeräte mit einer sogenannten 'Braille-Zeile'. Dabei wird Text in eine veränderbare Oberflächenstruktur des Materials der Braille-Zeile umgewandelt und über Abtasten mit dem Finger gelesen. Diese Form des Ausgabemediums ist für blinde Menschen gedacht.
embossed Wie 'braille# ist auch 'embossed' für blinde Menschen gedacht, hier allerdings für die Ausgabe auf einem Braille-Drucker. Dabei wird Text in Form von abtastbaren Oberflächenstrukturen in Papier oder ein vergleichbares Material gestanzt.
aural Dieser Medientyp gilt für die Sprachsynthese, bei der ein Sprecher den Inhalt des Dokuments vorliest.
Es können u.a. die Lautstärke, Pausen, die Richtung, aus der der Ton kommt, die Geschwindigkeit, die vorlesende Stimme (kindlich, weiblich oder männlich), Betonung und die Tonhöhe beeinflusst werden.
tty Dieser Medientyp gilt für die Ausgabe auf Geräten, die nur Text mit fester Buchstabenbreite ausgeben können, z.B. in der Textkonsole eines Linux-Systems, oder in einer Telnet- oder SSH-Session.
handheld Hier gilt die CSS-Datei für die Anzeige am Bildschirm von tragbaren Kleinstcomputern, wie z.B. web-fähige elektronische Organizer.
projection Hier gilt die CSS-Datei für die Datenprojektion mit Beamern und ähnlichen Geräten.
tv Hier gilt die CSS-Datei für TV-ähnliche Ausgabegeräte, die sich durch grobe Bildschirmauflösung und mangelnde Unterstützung beim Scrollen in Text, dafür aber durch Sound-Unterstützung auszeichnen.
Leider werden immer noch einige dieser Angaben von den meisten Browsern nicht erkannt. Der MS Internet Explorer interpretiert diese Angaben ab der Software-Version 4.0 zu einem gewissen Teil. Netscape findet auch in Version 6.0 zwar die richtige Style-Sheet-Datei für die Bildschirmformate, ignoriert jedoch beispielsweise Style-Sheet-Dateien mit Formaten für den Druck.

2.3 Kommentare zwischen CSS-Anweisungen

Zwischen CSS-Angaben können Kommentare formuliert werden. Diese werden mit /* eingeleitet und mit */ beendet. Alles, was sich dazwischen befindet, wird vom Browser ignoriert und somit nicht interpretiert. Auch wenn man dazwischen CSS-Befehle einfügt, werden diese nicht interpretiert.
Beispiel:
/* Dies ist ein Kommentar */
Kommentare dürfen auch Zeilenumbrüche enthalten, die dürfen jedoch nicht verschachtelt werden. Nach einem /* beendet das erste */ den Kommentar. Daher ist folgendes Beispiel falsch:
/* Dieses Beispiel ist falsch. 
/* Nach diesem Satz endet der Kommentar */
h1
{ 
  font-family: Arial;
  color: red;
} 
*/
Nach dem zweiten Satz wird der Kommentar beendet. Somit wird die Formatierung für h1 vom Browser umgesetzt und das schließende */ findet keinen Gegenpart mehr und ist somit fehlerhaft.
Kommentare müssen nicht in separaten Zeilen stehen, sondern können auch am Zeilenanfang, Zeilenende oder auch zwischen CSS-Deklarationen stehen. Man sollte jedoch auf solche Kommentare verzichten, da sie die Deklarationen sehr schnell unübersichtlich machen können.

2.4 Selektoren

In einer CSS-Regel definiert der Selektor, auf welche HTML-Elemente die folgenden CSS-Deklarationen angewendet werden sollen. So ist es auch naheliegend, dass der Name jedes im HTML-Standard definierten Elements ein Selektor ist. Zusätzlich gibt es in CSS2 auch noch den Selektor '*', der ein beliebiges Element auswählt.
Manchmal möchte man HTML-Elemente feiner voneinander unterscheiden, als dies durch den Namen allein möglich ist.
Dazu bietet CSS die Möglichkeit, HTML-Elemente aufgrund ihres 'class'-Attributs, ihres 'id'-Attributs oder aufgrund des Kontextes, indem sie stehen, auszuwählen.

2.4.1 Einfache Selektoren

Zu den einfachen Selektoren gehören neben den Elementnamen auch die Selektoren, die Elemente mit Hilfe eines Klassennamens, einer Pseudo-Klasse oder einer Id auswählen.

Auswahl durch Klassen

In HTML ist es Möglich, Elemente Klassen zuzuordnen. Dazu gibt man dem Attribut 'class' eines Elements als Wert den Klassennamen. Ein Selektor kann dann Elemente über ihre Klasse auswählen, und zwar einmal in Verbindung mit der Auswahl über Elemente:
tagname.classname { ... }
Hier würde nun der Selektor alle HTML-Elemente vom Typ 'tagname' mit dem 'class'-Attribut 'classname' auswählen.
Es ist aber auch die Auswahl aller zu einer Klasse zugehörigen HTML-Elemente möglich:
 .classname { ... }
*.classname { ... } /* In CSS2 */
Dazu besteht der Selektor nur aus dem Punkt, direkt gefolgt von dem Klassennamen, in CSS2 steht '*' für ein beliebiges Element.

Auswahl durch Id

Das 'id'-Attribut von HTML-Elementen wurde eingeführt, um HTML-Elemente mit einem Namen eindeutig identifizieren zu können. Deshalb dürfen in einem HTML-Dokument keine zwei Elemente ein 'id'-Attribut mit demselben Wert haben.
In CSS kann man Selektoren folgendermaßen benutzen, um Elemente über diesen Namen auszuwählen:
tagname#id { ... }
Hier würde nun der Selektor alle HTML-Elemente vom Typ 'tagname' mit dem 'id'-Attribut 'id' auswählen.
Es ist aber auch die Auswahl eines beliebigen HTML-Elements mit einer id möglich, ohne dass der Elementtyp eine Rolle spielt:
 #id { ... }
*#id { ... } /* In CSS2 */
dazu besteht der Selektor nur aus dem '#' direkt gefolgt von der Id, in CSS2 steht '*' für ein beliebiges Element.
Die W3C-CSS1-Empfehlung rät davon ab, Selektoren dieser Art zu verwenden, da hier gezielt einzelne Elemente ausgewählt werden, ohne Rücksicht auf die durch die Schachtelung von HTML-Elementen entstehende Dokument-Struktur (wozu Stylesheets eigentlich gedacht sind).

2.4.2 Pseudo-Klassen und Pseudo-Elemente

Normalerweise wählen Selektoren ganze HTML-Elemente aus. Um CSS jedoch etwas flexibler zu gestalten wurden sogenannte Pseudo-Klassen und Pseudo-Elemente eingeführt. Diese lassen sich (mit Ausnahme der Pseudo-Klasse ':first-child' in CSS2) nicht direkt aus der Struktur eines Dokuments ableiten, sondern werden im Fall von Pseudo-Elementen vom User Agent beim Parsen eingefügt, bei Pseudo-Klassen entscheidet der User Agent, welcher Pseudo-Klasse er ein Element zuordnet, diese Zuordnung kann sich auch ändern, wenn der Leser mit dem Dokument interagiert (z.B. die Maus bewegt, Links anklickt usw.)
Pseudo-Elemente adressieren bestimmte Eigenschaften oder Bereiche eines Elementes, für die die Dokumentensprache keine Entsprechung vorsieht, (z.B. den ersten Buchstaben oder die erste Zeile eines Elementes).
Pseudo-Klassen hingegen werden dafür verwendet, um verschiedene Elemente desselben Typs aufgrund ihrer Bedeutung einer Klasse zuzuweisen, z.B. um neue und bereits besuchte Hyperlinks zu Unterscheiden. Pseudo-Klassen gehören zwar auch zu den einfachen Selektoren, da sie sich aber von den aus dem Dokument direkt abgeleiteten Klassen unterscheiden, behandeln wir sie erst in diesem Kapitel.

Pseudo-Klassen

:first-child Wählt das erste Kind-Element eines Elementes aus. CSS2
:link wählt noch nicht besuchte Verweise aus. CSS1, CSS2
:visited wählt bereits besuchte Verweise aus CSS1, CSS2
:active wählt das gerade aktive Element aus, also wenn z.B. der Mauszeiger auf das Element zeigt, und die Maustaste gedrückt wird. CSS1, CSS2
:hover Ein Element gehört zu diese Pseudo-Klasse, wenn der Benutzer mit seinem Mauszeiger oder einem ähnlichen Zeigegerät darüber fährt, es aber nicht aktiviert. CSS2
:focus Ein Element gehört zu dieser Pseudo-Klasse, wenn es gerade Texteingaben akzeptiert. CSS2
:lang(Sprach-Kürzel) Das Sprach-Kürzel zwischen den Klammern muss nach HTML-4.0 bzw. RFC1766 gültig sein. Diese Pseudo-Klasse wählt dann Elemente aus, die entweder durch ein entsprechendes Meta-Element im Dokument-Kopf, durch ein 'lang'-Attribut oder durch HTTP-Header als zu dieser Sprache zugehörig gekennzeichnet sind. CSS2
Die W3C-HTML-Empfehlung definiert für das Body-Tag die drei Attribute 'link', 'vlink' und 'alink'. Mit diesen ist es möglich, in einem HTML-Dokument die Farbe von Hyperlinks, besuchten Hyperlinks und aktiven Hyperlinks festzulegen. Die Möglichkeiten von CSS, Hyperlinks mit Hilfe von Pseudo-Klassen zu Formatieren, sind jedoch um ein Vielfaches zahlreicher, da mit diesen sämtliche Formatierungs-Eigenschaften von Hyperlinks beeinflusst werden können.

Pseudo-Elemente

Pseudo-Elemente wählen wie bereits oben gesagt bestimmte Teile eines Elements aus. In CSS1 gibt es 2 solche Pseudo-Elemente, 'first-line' und 'first-letter', die man benutzen kann, um die erste Zeile, bzw. den ersten Buchstaben eines Elementes auszuwählen.
CSS2 hat die ursprüngliche Empfehlung um zwei weitere Pseudo-Klassen, ':before' und ':after', erweitert.
:first-line Ein Selektor mit diesem Pseudo-Element wählt die erste Zeile des Elements aus. CSS1, CSS2
:first-letter Ein Selektor mit diesem Pseudo-Element wählt den ersten Buchstaben des Elements aus. CSS1, CSS2
:before, :after Diese Pseudo-Elemente kann man benutzen, um mit Hilfe der CSS-Eigenschaft 'content' am Anfang bzw. am Ende eines Elements zusätzlichen Text hinzuzufügen. CSS2

2.4.3 Kontext-Sensitive Selektoren

Mit kontext-sensitiven Selektoren kann man sich die durch Schachtelung von HTML-Elementen entstehende Dokumentstruktur zu Nutze machen.
Um Beziehungen zwischen verschiedenen Elementen zu definieren, führen wir uns vor Augen, dass ein User Agent beim parsen eines HTML-Dokuments, den sogenannten Dokument-Baum erstellt. Dabei bildet das 'html'-Element die Wurzel, deren Kinder das 'head'- und das 'body'-Element sind. Diese sind wiederum Wurzeln der Teilbäume, die die Struktur der in ihnen enthaltenen Elemente beschreiben.
01:<html>
02:  <head>
03:    <title>Title</title>
04:  </head>
05:  <body>
06:    <h1 id="chapter1">Kapitel 1</h1>
07:    <table>
08:      <tr class="header">
09:        <td>1. Zeile 1. Spalte</td>
10:        <td>1. Zeile 2. Spalte</td>
11:      </tr>
12:      <tr>
13:        <td>
14:          <p>Text,
15:          <br />
16:           neue Zeile.</p>
17:        </td>
18:        <td><a href="no.html">Link</a> </td>
19:      </tr>
20:    </table>
21:  </body>
22:</html>
Parse Tree

Innerhalb dieser Baumstruktur lassen sich auch Verwandschafts-Beziehungen zwischen einzelnen Elementen herstellen. In CSS kann man einfache Selektoren (das sind der Selektor '*', Elementtyp-Selektoren, Klassen- und Pseudo-Klassen-Selektoren, sowie Id-Selektoren) mit sogenannten Kombinatoren verknüpfen. Der einfachste Kombinator ist die Möglichkeit, zwei oder mehr Selektoren mit Whitespace zu verknüpfen, um Nachfolge-Elemente auszuwählen. Diese Möglichkeit wurde bereits in der CSS1-Empfehlung eingeführt. Die CSS2-Empfehlung erweitert diese Möglichkeit noch durch den Kombinator '>', um Kind-Elemente auszuwählen, sowie den Kombinator '+', um Geschwister-Elemente auszuwählen.
In den folgenden kurzen Beispielen gehen wir davon aus, dass A und B einfache Selektoren sind:
A B { ... } Dieser Selektor wählt genau die Elemente aus, auf die der Selektor B passt, wenn diese innerhalb von einem Element stehen, auf das der Selektor A passt. Dabei muss das von B ausgewählte Element kein direkter Nachfolger von dem durch A ausgewählten Element sein.
Betrachtet man das obere Beispiel, so würde der Selektor html p z.B. das 'p'-Element in der unteren linken Tabellenzelle auswählen.
A > B { ... } Dieser Selektor wählt genau die Elemente aus, auf die der Selektor B passt, wenn diese direkter Nachfolger eines Elements sind, auf das der Selektor A passt.
Der Selektor html > p würde das 'p'-Element im Beispiel also nicht auswählen. Funktionieren würde z.B. der Selektor html > body > table > tr > td > p
A + B { ... } Dieser Selektor wählt genau die Elemente aus, auf die der Selektor B passt, wenn diese genau auf ein Element folgen, auf das der Selektor A passt, und das von A ausgewählte Element vorher geschlossen wird.
Man kann so z.B. gezielt die n-te Tabellenzelle der n-ten Zeile auswählen. So würde table > tr + tr > td + td die 2. Zelle der 2. Zeile auswählen.
Wie wir bereits an einigen Beispielen gesehen haben, können beliebig viele einfache Selektoren mit den oben beschriebenen Kombinatoren (Whitespace, '+', '>') , auch unterschiedlichen Typs, verknüpft werden. Es ist weiterhin zulässig, dass der letzte Selektor der Verkettung zusätzlich ein Pseudo-Element auswählt: table > tr > td > p:first-letter ist sein gültiger Selektor, um im Beispiel den ersten Buchstaben des Absatzes in der unteren linken Tabellenzelle auszuwählen.

3 Die Kaskade

CSS ermöglicht unter Anderem, dass mehrere Stylesheets ein Dokument beeinflussen. Das ermöglicht dem Autoren einerseits die Modularisierung von Stylesheets, andererseits soll der Benutzer in die Lage versetzt werden, die Standard-Darstellung seines User Agent mit persönlichen Stylesheets zu beeinflussen, bzw. an seine individuellen Bedürfnisse anzupassen.
Die im Folgenden beschriebene Kaskadierungs-Ordnung (cascading order) legt bei Konflikten zwischen verschiedenen Regeln fest, welche Regel letztendlich angewendet wird.

3.1 Kaskadierungs-Ordnung

Bei Konflikten zwischen zwei Regeln, muss ein User Agent folgenden Algorithmus anwenden, um zu bestimmen, welchen Wert eine Eigenschaft eines Elementes bekommt: Deklarationen, die im 'style'-Attribut eines Element stehen, haben keinen Selektor in diesem Sinne. Für die Sortierung wird jedoch angenommen, dass sie einen 'id'-Selektor haben (Genauigkeit a=1, b=0, c=0) und nach allen anderen Deklarationen stehen.
Ein User Agent darf im HTML-Standard vorgesehene Gestaltungsmittel wie z.B. die 'text'- und 'bgcolor'-Attribute bei dem oben beschriebenen Verfahren berücksichtigen. Dabei wird das Attribut in eine äquivalente CSS-Regel überführt, die eine Genauigkeit von 1 (bei CSS2: 0) hat und von der angenommen wird, dass sie am Anfang des Autoren-Stylesheets steht.

4 Formatierungs-Modell

CSS1 geht von einem Modell aus, in dem jedes Element ein Rechteck erzeugt. Dieses Rechteck enthält mindestens den Inhalt (Content) des Elements und kann zusätzlich von drei weiteren Rechtecken umgeben sein, und zwar vom Innenabstand (Padding), Rahmen (Border) und äußerem Rand (Margin).
Box-Modell http://www.w3.org/TR/REC-CSS2/images/boxdim.gif
Die Größen und Eigenschaften dieser 3 Rechtecke können mit Hilfe eigener CSS-Eigenschaften bestimmt werden.
Der Rand ist immer durchsichtig, so dass an seiner Stelle das Elternelement durchscheint.
Bei der Seitengestaltung unterscheidet man zwei Grundtypen von Elementen: Block-level Elemente und Inline-level Elemente.

4.1 Block-level Elemente

Block-level-Elemente nennt man auch absatzbildende Elemente. Sie dürfen weitere Block-level- und Inline-level-Elemente enthalten. CSS1 bezeichnet alle Elemente, deren 'display'-Eigenschaft den Wert 'block' oder 'list-item' haben, sowie die Elemente, deren 'float'-Eigenschaft nicht den Wert 'none' haben, als Block-level-Element.
Welche Elemente diese Eigenschaften aufweisen, werden durch das default-Stylesheet des User Agent bestimmt. Ein Beispiel-Stylesheet, wie ein User Agent HTML-Dokumente in der HTML Version 4.0 formatieren sollte, kann man hier auf den Seiten des W3-Konsortiums finden.
HTML sieht ab der Version 3.2 das generische Block-level Element 'div' vor. Für dieses sollte ein User Agent in der Regel keine Eigenschaften außer 'display: block' festlegen, man kann es also nach eigenen Vorstellungen formatieren. Besonders ist auch, dass innerhalb eines 'div' beliebig viele andere Elemente stehen können, einschliesslich weiterer Block-Level-Elemente. So kann man auf einfache Art und Weise zusammenhängende Elemente und Text gruppieren und nach den eigenen Vorstellungen formatieren.

4.2 Inline-level Elemente

Elemente, die nicht als Block-level Element formatiert werden, betrachtet CSS1 als Inline-level Element. Sie unterbrechen den Textfluss nicht. Muss ein Inline-level Element aufgrund seiner Größe auf mehrere Zeilen verteilt werden, so erzeugt es auf jeder dieser Zeilen ein rechteckigen Bereich. Ränder, Rahmen und Innenabstände werden an den Stellen, an denen das Element aufgeteilt wird, nicht berücksichtigt.
Seit der Version 4.0 kennt der HTML das generische Inline-level Element 'span'. Für dieses Element sollte der User Agent der Eigenschaft 'display' den Wert 'inline' als Standard-Einstellung festlegen, und sonst nichts. Analog zum 'div'-Element lässt sich ein 'span'-Element also ganz nach den eigenen Wünschen formatieren, allerdings mit der Einschränkung, dass innerhalb dieses Inline-Level-Elementes keine Block-Level-Elemente stehen dürfen.

4.3 Zu ersetzende Elemente

Zu ersetzende Elemente, sind solche Elemente, die eigentlich nur einen Verweis auf das eigentliche Element darstellen, wie z.B. das 'img'-Element. Solche Elemente haben i.d.R. ihre eigene im Dateiformat festgelegte Größe, die der User Agent verwenden sollte, wenn die 'width'- bzw. 'height-Eigenschaft den Wert 'auto' (also den Standardwert) hat. Zu ersetzende Elemente können sowohl Block-level- als auch Inline-level-Elemente sein.

4.4 Elemente und Anzeige-Eigenschaften

Seit CSS2 ist es möglich, die meisten HTML-Elemente mit Hilfe der generischen Elemente 'div' und 'span' durch Einteilung in Klassen und entsprechende Formatierung dieser Klassen zu ersetzen. Im Prinzip ist es sogar möglich, durch konsequente Überschreibung aller für ein Element festgelegten Eigenschaften, dieses völlig anders darzustellen, als dies in der HTML-Empfehlung vorgesehen ist. So kann man in CSS2 beispielsweise ein 'div'-Element durch die Deklaration display: table so formatieren wie eine Tabelle. Tabellenzeilen und -zellen lassen sich dann Analog durch display: table-row und display: table-cell formatieren.
CSS2 berücksichtigt in den möglichen Werten der 'display'-Eigenschaft neben Tabellen und ihren Besonderheiten auch Listen und einige andere Arten, Elemente zu formatieren.
HTML-Dokumente sollte man allerdings mit den durch die HTML-Empfehlung (z.B. XHTML1.0) definierten Elementen gliedern, und auch große Änderungen ihrer Anzeige-Eigenschaften vermeiden, da ihre Semantik weitgehend bekannt und anerkannt ist.
Die Möglichkeit, die Anzeigeeigenschaften eines Elementes zu ändern oder überhaupt erst zu definieren, hat allerdings für XML-Dokumente eine besondere Bedeutung. In XML haben Elemente zunächst keine Semantik bezüglich ihrer Darstellung. Möchte man also ein XML-Dokument mit Hilfe von CSS formatieren, so muss man selbst definieren (im Stylesheet), welche Elemente man z.B. in Tabellenform, als Liste oder als Inline-Element formatieren möchte oder welche Elemente einen Absatz erzeugen sollen. Ein Autor kann also sein Dokument so strukturieren, wie er es für sinnvoll hält, und dann ein Stylesheet schreiben, dass dieser Struktur gerecht wird, und das Dokument so darstellt, wie er es für richtig hält.

5 Attributwerte

CSS-Eigenschaften können die unterschiedlichsten Wert-Typen erwarten, z.B. Strings , spezielle Schlüsselwörter, wie z.B. 'auto' und 'normal', oder aber eine Länge, einen Prozentwert, eine Farbe, einen URL. Für die letzteren vier legt die CSS-Empfehlung eine eindeutige Syntax fest, die wir in diesem Kapitel näher erläutern wollen.

5.1 Längen

Bekommt ein Attribut eine Länge als Wert, so sieht die CSS-Empfehlung dafür vor, dass diese aus einem optionalen Vorzeichen ( '+' oder '-') bestehen (wird es weggelassen, so wird ein '+' angenommen), direkt gefolgt von einer Zahl (mit oder ohne Dezimalpunkt), auf die wiederum eine zwei Buchstaben lange Abkürzung einer Einheit folgt. Whitespace zwischen Vorzeichen, Zahl und Einheit ist unzulässig. Wird '0' als Länge angegeben, so darf diese Einheit auch weggelassen werden.
Syntax:
length := [['+'|'-']? number unit] | '0'
number := digit+ ['.' digit+]?
digit  := '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
Die CSS-Empfehlung unterscheidet zwischen relativen und absoluten Längenangaben. Sie sieht folgende relative Längeneinheiten vor:
  em   Ein 'em' ist die Fontgröße des Elements. Für die CSS-Eigenschaft 'font-size' ist ein 'em' gleich der Fontgröße des Elternelements. Das besondere an dieser Einheit ist, dass sie mit der Schriftgröße skaliert, einmal passend eingestellt also zu jedem Ausgabemedium und der dort verwendeten Schriftgröße passt.
  ex   Ein 'ex' ist die sogenannte 'x'-Höhe des für das Element verwendeten Fonts, also die Höhe des kleinen 'x' dieses Fonts. Sollte ein Font kein kleines 'x' enthalten, so muss für diesem trotzdem eine 'x'-Höhe definiert sein. Auch diese Einheit skaliert mit der Schriftgröße.
  px   Die Größe eines 'px' hängt von der Auflösung des verwendeten Ausgabemediums ab, auf einem typischen Computer-Bildschirm entspricht dies z.B. genau einem Pixel, also einem Bildpunkt. Unterscheidet sich die Auflösung des Ausgabemediums stark von einem solchen Computer-Bildschirm, so sollten Pixel-Angaben skaliert werden.
Relative Längenangaben werden nicht als solche vererbt, vielmehr wird ein aus diesen Angaben errechneter Absolutwert vererbt.
Die CSS-Empfehlung kennt folgende absolute Längeneinheiten:
  in   'in' steht für 'inches'. Ein Inch entspricht 2.54 Zentimetern.
  cm   'cm' steht für Zentimeter.
  mm   'mm' steht für Millimeter.
  pt   'pt' steht für 'points'. Ein Point entspricht 1/72 Inch. Diese Einheit findet man häufig auch bei Textverarbeitungen, zur Angabe einer Font-Größe.
  pc   'pc' steht für 'picas'. Ein Pica entspricht 12 Points.
Möchte ein Autor, dass seine Dokumente auf möglichst vielen Ausgabegeräten darstellbar sind, so sollte er möglichst auf absolute Längenangaben verzichten, und stattdessen die von der Font-Größe abhängigen Einheiten 'em' oder 'ex' verwenden, da diese mit der Schriftgröße skalieren und die meisten User Agents diese den Begebenheiten des Ausgabemediums anpassen.
Beispiele:
td { padding: 1.5em; }

div { margin: 1.5cm; }

td { border-width: 0 }

5.2 Prozentangaben

Prozentwerte werden ganz ähnlich wie Längenangaben notiert. Auf ein optionales Vorzeichen ('+' oder '-') folgt entweder eine ganze Zahl oder eine Dezimalzahl, danach wird ein '%'-Zeichen notiert. Zwischen den einzelnen Teilen darf kein Whitespace stehen.
Syntax:
percentage := [['+'|'-']? number '%'] | '0'
Beispiele:
td { padding: 3.5%; }

div { font-size: 75%; }
Prozentangaben müssen sich immer auf eine andere Angabe beziehen. Läßt eine CSS-Eigenschaft Prozentangaben zu, so muss in der CSS-Empfehlung definiert sein, worauf sich diese Angabe bezieht.
Wird eine Eigenschaft, deren Wert in Prozent angegeben ist, vererbt, so wird, analog zu relativen Längenangaben, zuerst eine absolute Länge errechnet, und diese dann weitervererbt.

5.3 Farben

Es gibt in CSS drei verschiedene Möglichkeiten, Farben zu notieren.
Die erste Möglichkeit ist es, eine der 16 in der HTML-4.0-Empfehlung definierten Schlüsselwörter (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow) zu benutzen.
Die zweite Möglichkeit ist es, eine Notation zu verwenden, bei der auf ein '#' entweder drei (#rgb) oder sechs (#rrggbb) Hexadezimale Ziffern folgen. Die mit 'r' gekennzeichneten Stellen beschreiben den Anteil an Rot, die mit 'g' gekennzeichneten Stellen den Anteil an Grün und die mit 'b' gekennzeichneten Stellen den Anteil an Blau.
Die letzte Möglichkeit ist die Verwendung der 'rgb()' - Notation. Dabei stehen innerhalb der Klammern entweder drei durch Kommata getrennte Prozentwerte im Bereich von 0.0% bis 100.0% oder drei durch Kommata getrennte ganze Zahlen im Bereich von 0-255. Vor und nach den Zahlen darf Whitespace stehen. Findet ein User Agent Werte, die außerhalb dieser Bereich liegen, z.B. Negative oder zu große Zahlenwerte, so soll er stattdessen die Grenzwerte nehmen (also 0.0%, 100.0%, 0 oder 255).
Syntax:
color      := colkeyword | hexcol | numcol

colkeyword := 'aqua' | 'black' | 'blue' | 'fuchsia' | 'gray' | 'green' 
            | 'lime' | 'maroon' | 'navy' | 'olive' | 'purple'
            | 'red' | 'silver' | 'teal' | 'white' | 'yellow'
                      
hexcol     := ['#' hd hd hd [hd hd hd]? ]
                  
numcol     := 'rgb(' ws percentage ws ',' ws percentage ws ',' ws percentage ws ')'
            | 'rgb(' ws digit+ ws ',' ws digit+ ws ',' ws digit+ ws ')' |

hd         := digit | 'a'|'A' | 'b'|'B' | 'c'|'C' | 'd'|'D' | 'e'|'E' | 'f'|'F'
'ws' bezeichnet hier Whitespace, also Spaces, Tabs und Zeilenumbrüche.
Beispiele:
h1 { color: fuchsia; }

td { background-color: #000; color: #c0c0c0; }

body { color: rgb( 255,255,255); background-color: rgb( 50.0%, 50.0%, 50.0%); }

5.4 URLs

Erwartet eine CSS-Eigenschaft als Wert einen URL, so wird dieser mit Hilfe der 'url()'-Notation angegeben. Nach der öffnenden und vor der schließenden Klammer darf Whitespace stehen. Der eigentliche URL wird dann dazwischen notiert, darin enthaltene Klammern, Kommata, Whitespace-Zeichen, einfache und doppelte Hochkommata müssen mit dem Backslash ('\') escaped werden. Der URL darf durch genau ein paar einfache oder doppelte Hochkommata eingeschlossen werden.
Syntax:
url := 'url(' ws ['"' locator '"'| "'" locator "'" | locator] ws ')'
'locator' ist ein nach RFC1738 gültiger und nach den obigen Regeln umgewandelter URL.
Beispiele:
@import url( "http://www.damogran.de/ausarbeitung.css" )

@import url('colors.css')

@import url( "/Folder\ With\ Spaces\ and\ \"\'\"-Characters\ in\ it/test.css")
Relative URLs beziehen sich immer auf die Position des Stylesheets, in dem sie stehen, nicht auf die Position des Dokumentes, welches dieses Stylesheet möglicherweise importiert.

6. Zusammenfassung

Mit Hilfe von Cascading Style Sheets kann man bei der Erstellung von Webseiten die Textauszeichnung vom Layout trennen. Dadurch werden HTML-Dokumente viel übersichtlicher und bei der Entwicklung von Webseiten kann sehr viel Zeit gespart werden. Ein Nachteil von CSS ist, dass einige Browser manche CSS-Regeln noch nicht kennen. Somit kann es vorkommen, dass gewisse Formatierungen bei einigen Browsern gar nicht hervorkommen können. Es gilt jedoch als sicher, dass mit der rasanten Weiterentwicklung des World Wide Web und den immer neu herauskommenden Version von Browsern, in Zufunft fast alle Browser die meisten CSS-Anweisungen kennen werden.