CSS

Cascading Style Sheets ergänzen HTML- und XML-Dokumente. Sie sollen alle Informationen enthalten, die sich auf das Aussehen und die Darstellung der Dokumentinhalte beziehen. HTML- und XML-Dokumente dürfen eigentlich keine Einstellungen zur optischen Gestaltung der Daten enthalten (noch wird das von den heutigen Browsern toleriert, es ist aber nicht mehr regelkonform).

Kompatibilität:

Es gibt momentan den ursprünglichen Entwurf CSS1 und den neueren CSS2 des zuständigen W3-Konsortiums. Die offiziellen Seiten sind
http://www.w3.org/TR/REC-CSS1
http://www.w3.org/TR/REC-CSS2

Das Verhalten einiger Browser (CSS2 wird nur teilweise unterstützt):
Netscape ab Version 6: CSS1 großteils unterstützt
Mozilla, Firefox: vorbildlich
Opera: sehr gut
MS Internet Explorer: großteils ok, doch einige Anweisungen werden nicht genau den W3-Vorschriften entsprechend umgesetzt.

Leider ist es immer noch recht mühsam, Seiten so zu gestalten, dass sie sowohl in alten, als auch in neuen Browsern perfekt aussehen. Eine wertvolle Hilfe ist das Online-Nachschlagewerk 'SelfHTML', das Auskunft darüber gibt, ab welcher Version der Browser eine Einstellung genutzt werden kann. Ältere Versionen ignorieren unbekannte Befehle, oder zeigen sie einfach als Klartext an.

Der Empfehlung des W3, Tags prinzipiell in Kleinbuchstaben zu schreiben, folge ich hier zur besseren Lesbarkeit nicht.

Einbindung von Style Sheets in HTML:

Die einfachste Einbindung geschieht im HEAD-Teil des Dokuments.

<HTML> <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="meinstylesheet.css"> ...... </HTML>

(Es ist zwar möglich, CSS-Befehle direkt ins Dokument aufzunehmen, doch widerspricht das der eigentlichen Aufgabe von Style-Sheets.)

Die CSS-Datei

Sie besteht aus einer Abfolge von Regeln, die folgendermaßen aufgebaut sind:

selector { declaration; declaration; ... ; declaration }

Leerzeichen und \n sind zwischen den Deklarationen beliebig erlaubt. Die letzte Deklaration darf ebenfalls mit einem ; abgeschlossen werden. Die Syntax ist an C angelehnt.

Jede Deklaration hat die Form

property:value

Enthält der Wert Leerzeichen, muss er in Anführungszeichen "..." gesetzt werden. Um den Doppelpunkt darf man Leerzeichen machen, doch ignorieren ältere Netscape-Browser dann diese Deklaration.

Simple Selectors

Während in XML jeder beliebige String zulässig ist, muss es sich bei HTML um den Namen eines Tags handeln. Dieser wird dann in (einigen) seiner Eigenschaften festgelegt:
H2 { color : silver; font-size : 18pt; }

Grouping

Man darf mehrere Selektoren mit Beistrichen zusammenfassen. Spätere Definitionen überschreiben jüngere.
H2,H3,H4 { color : silver; font-size : 18pt; } H2 { color : white }
Es ist auch möglich, kontextbezogene Regeln zu formulieren:
H1 I { color : blue; }
färbt Kursivschriften blau, allerdings nur dann, wenn der <I>-Tag innerhalb einer Überschrift der Größe 1 auftritt.

Class Selectors

Für mehrfache Verwendung:
P.warning { color : red; } <P class="red">Achtung!!!</P>

Soll sich eine Regel auf alle Tags beziehen dürfen,
all.red { color : red; }oder
.red { color : red; }

ID Selectors

Zur einmaligen Anwendung in einem Dokument. ID übertrifft Class bei Mehrfachdefinition.
P#warning { color : red; } <P ID="red">Achtung!!!</P>Auch hier ist all. erlaubt.

Pseudo-Class Selectors

Eine typische Zeile wie
<BODY LINK="blue" VLINK="red" ALINK="yellow">
wird ersetzt durch
A:link { color:blue } A:visited { color:red } A:active { color:yellow }

Pseudo-Element Selectors

Damit kann auf einzelne Elemente zugegriffen werden. Folgendes färbt den ersten Buchstaben jedes Absatzes <P>...</P>rot.
P:first-letter { color:red }
Auch hier ist es nicht nötig, <P class=...> oder ähnliches zu schreiben. Es ist allerdings wichtig, <P>-Tags korrekt abzuschließen.

Cascading

Die gewöhnlichen Vorrangregeln (jünger geht vor älter, ID vor CLASS, 'all' vor speziellem Selektor) lässt sich beeinflussen. Mithilfe des Schlüsselwortes !important kann man die Gültigkeit einer Regel erzwingen:
H1 { color:red !important; }

Classification of Elements

Block-level elements: <P>, <H1>,<TABLE>, <DIV>, <BODY>,... betreffen einen gesamten Block.
Inline elements: <A>, <B>, <SPAN>,... betreffen Abbschnitte in einem Block
List-item elements: <LI>,... betreffen das Aussehen einer Aufzählung
None

Das Objekt 'none' ist sehr universell.
So kann man etwa mithilfe der Regel IMG {display:none} die Anzeige von Bildern generell unterbinden!

Es ist möglich, Regeln abhängig vom Ausgabemedium zu formulieren. Dieses Medium kann neben dem Standardmedium Bildschirm etwa der Drucker oder die Sprachausgabe sein. Soll etwa beim Ausdruck die Hintergrundfarbe weiß sein, formuliert man
@media print { BODY { background-color:white; } }