Vielen Lesern ist das aussehen eines Blockes CSS-Codes vielleicht schon bekannt. Trotzdem könnte dieser Artikel auch interessant sein, für diejenigen, die ihre Stylesheets mittels eines Webeditors wie Dreamweaver erstellen und mit den einzelnen Begrifflichkeiten und Fachtermini nicht 100%ig vertraut sind.
In diesem Text will ich versuchen CSS-Einsteigern und -Umsteigern die Begrifflichkeiten näher zu bringen. Ich erhebe keinen Anspruch auf 100%ige Korrektheit und Eindeutigkeit. Das muss der offiziellen CSS-Spezifikation überlassen bleiben. Zur Orientierung verweise ich ausserdem auf die Deutsche Übersetzung derselben.
Nun aber los!
Ich werde zunächst einmal einen gewöhnlichen "CSS-Block", auch Regelmenge genannt, Beispielhaft darstellen und ihn dann Stück für Stück auseinandernehmen. Ich bevorzuge dabei den Allgemeinen Ausdruck "Regel" anstatt dem (IMHO gestelzt klingenden) offiziellen Begriff "Regelmenge".
#beschreibung {
background: #CCCCCC;
color: #000000;
font-size: 12px;
}
Selektoren
Grundsätzlich besteht eine Anweisung aus zwei Teilen: dem Selektor und den Eigenschaften. Der Selektor ist im Beispiel #footer, er steht immer vor geschweiften Klammern. Selektoren wählen das HTML-Element aus, auf dass die Regel angewendet werden soll.
Im Beispiel wird das HTML-Element ausgewählt, dessen id-Attribut den Wert "beschreibung" hat, also zb: <div id="beschreibung"></div>, denn die Raute "#" ist das Zeichen für einen ID-Selektor. Eine ID darf in einer HTML-Seite nur ein einziges mal vorkommen.
Würde statt der Raute ein Punkt "." stehen, also z.B. .beschreibung {...} wäre das ein Klassen-Selektor, der alle elemente auswählt, deren class-Attribut "beschreibung" ist, also sowohl <div class="beschreibung"></div> als auch <div class="beschreibung"></div>. Für eine Beschreibung (wie im Beispiel) eignet sich also die Vergabe von Klassen und die Verwendung von Klassen-Selektoren eher, da es wahrscheinlich ist, dass davon mehrere auf einer Seite vorkommen.
Es gibt noch weitaus kompliziertere Selektoren als die hier gezeigten häufigsten Typen, eine Erläuterung aller verschiedenen Typen würde aber den Rahmen dieser kurzen Begriffserklärung sprengen.
Eigenschaften
Innerhalb der geschweiften Klammern befinden sich das Kernstück einer solchen CSS-Regel, nämlich die Eigenschaften die den mit dem Selektor ausgewählten HTML-Elementen zugewiesen werden.
Eigenschaften werden immer von einem Doppelpunkt abgeschlossen, darauf folgt ihr jeweiliger Wert.
.beschreibung {color: red;} weist so allen Beschreibungen (also Elementen mit der Klasse "beschreibung") die Schriftarbe rot zu.
Grammatik
Eigenschaften-Wert-Paare müssen von einem Semikolon abgeschlossen werden (es sei denn es handelt sich um die letzte Eigenschaft einer Regel. Der Einfachheit halber sollte aber immer ein Semikolon am Ende folgen).
Leerzeichen oder Zeilenumbrüche können innerhalb der geschweiften Klammern (aber nicht innerhalb von Eigenschaft-Wert-Paaren!) beliebig verwendet werden.