XML-Know How

CSS – die Syntax

Eine CSS-Datei ist – genau wie alle anderen W3C-Technologiestandards (XML, HTML, DTD etc.) – eine offene, mit jedem Texteditor bearbeitbare Textdatei in Unicode-Codierung. Damit erfüllt sie die Anforderungen der Plattformneutralität und kann auf jedem Browser und E-Book-Lesegerät gelesen werden. Die Syntax ist vom W3C festgelegt.

Die CSS-Regel

Eine CSS-Datei nennt man ein Stylesheet. Es besteht aus einer oder mehreren Regeln. Die Regel bildet das Grundkonstrukt eines Stylesheets. Sie hat immer folgenden Aufbau:

Selektor { Deklarationsblock }

Der Selektor gibt an, was formatiert werden soll – in der Regel ein Element, eine Klasse oder eine Kombination aus beidem. Der Deklarationsblock, der immer in geschweiften Klammern steht, gibt an, welche Formatierung angewendet werden soll.

Der Deklarationsblock besteht aus einer oder mehreren Deklarationen, die jeweils durch ein Semikolon abgeschlossen werden:

Selektor { Deklaration1;

Deklaration2;

Deklaration3; }

Die einzelne Deklaration wiederum enthält eine konkrete Formatierungsanweisung. Sie besteht immer aus einer Eigenschaft und einem Wert, die durch einen Doppelpunkt voneinander getrennt sind:

Selektor { Eigenschaft1: Wert1;

Eigenschaft2: Wert2;

Eigenschaft3: Wert3; }

Ein Stylesheet kann beliebig viele solcher Regeln enthalten; die Reihenfolge der Regeln im Stylesheet ist dabei unerheblich (Ausnahme: werden zwei Regeln mit demselben Selektor angegeben, kommt die weiter unten im Stylesheet stehende Regel zum Einsatz).

Beispiel:

p { color: red;

font-size: 12px;

text-indent: 20px; }

Diese Regel würde dazu führen, dass alle Absätze (Selektor: p) in roter Farbe (color: red), 12 Pixel Schriftgröße (font-size: 12px) und mit einem Erstzeileneinzug von 20 Pixel (text-indent: 20px) formatiert werden. Alle anderen Eigenschaften, die ein Absatz darüber hinaus noch besitzt (z. B. Schriftart, Zeilenabstand, Buchstabenabstand, Leserichtung etc.) werden weiterhin von den Initialwerten des Browsers vererbt. Es ist also nicht erforderlich (und auch gar nicht sinnvoll), eine »vollständige« Regel zu verfassen, in der sämtliche zulässigen Werte angegeben werden. Das nachfolgende Beispiel mag das nochmals vertiefen:

Beispiel:

h1, h2, h3 { color: blue;

border: 1px solid black; }

Diese Regel enthält einen etwas komplexeren Selektor (h1, h2, h3). Hier werden in einer gemeinsamen Regel Deklarationen für die Überschriften der Stufe 1, 2 und 3 angegeben. Man könnte nun meinen, dass damit die drei Überschriftsebenen identisch aussehen – das ist aber nicht der Fall. Vielmehr behält jede Überschrift alle ihre Initialwerte bei, die nicht ausdrücklich überschrieben werden – so auch die Schriftgröße. Die Regel aus unserem Beispiel sorgt also ausschließlich dafür, dass die drei Überschriften h1, h2 und h3 dieselbe Textfarbe (color: blue) und jeweils einen 1 Pixel breiten, durchgezogenen schwarzen Rahmen (border: 1px solid black) erhalten.

Info

Die meisten Eigenschaften sind von ihrer (stets englischsprachigen) Bezeichnung her eindeutig gehalten. Schon mit einem Set von etwa 20 Eigenschaften und den entsprechenden Werten lassen sich die meisten Formatierungen erzielen. In der Summe gibt es freilich weit mehr als 100 Eigenschaften, für die es gute Referenzen im Web gibt, wie z. B. de.selfhtml.org oder www.css4you.de

Einige der wichtigsten CSS-Deklarationen fasst der nachfolgende Ausschnitt aus einem CSS-Stylesheet zusammen:

Beispiel:

p { font-family: Verdana,Arial,sans-serif;

font-size: 9px;

font-weight: bold;

line-height: 1.5;

text-indent: 20px;

margin-bottom: 5px;

color: green;

background-color: #CCCCCC;

}

img { width: 200px;

height: 150px;

float: right;

margin: 10px;

}

div { background-image: url(../images/bg.jpg);

border: 1px solid black;

padding: 5px;

}

a { font-style: italic;

font-decoration: none;

}

Merke:
Erläuterung der CSS-Eigenschaften

font-family  

= Wahl der Schriftart,

font-size  

= Schriftgröße

font-weight  

= Schriftstärke

line-height  

= Zeilenabstand

>text-indent  

= Erstzeileneinzug

margin-bottom

= Abstand am unteren Rand (des Absatzes)

color

= Schriftfarbe

background-color

= Hintergrundfarbe

width

= Breite (hier: des Bildes)

height

= Höhe

float

= Umfließen des Bildes mit Text (hier: Das Bild soll rechts stehen und links mit Text umflossen werden)

margin

= Außenabstand (rings um das Bild)

background-image

= Hintergrundbild

border

= Rahmen (hier: eine 1px breite, durchgezogene schwarze Linie)

padding

= Innenabstand (d. h. Abstand des im Rahmen stehenden Textes zum Rahmen selbst)

font-style

= Schriftform

font-decoration

= weitere Schriftauszeichnung (hier: keine Unterstreichung)