Die Anatomie einer CSS Regel

Im vorherigen Kapitel haben wir das klassische "Hallo Welt"-Beispiel verwendet, um ein Gefühl dafür zu bekommen, wie einfach es ist, ein HTML-Element mit CSS zu gestalten. Aber wodurch sieht es so aus? In diesem Kapitel behandeln wir die Anatomie und Syntax von CSS, um ein tieferes Verständnis der Funktionsweise zu bekommen. Wir sehen uns das vorherige Beispiel erneut an, eine CSS-Regel, welche H1-Elemente anspricht.

h1 {
	color: DeepSkyBlue;
}

Hier haben wir den Selektor mit einer Eigenschaft und einem Wert. Dies sind die Grundbegriffe von CSS, deren Namen du dir merken solltest, während du mit dem Tutorial fortschreitest. In diesem Beispiel ist h1 der Selektor, color ist die Eigenschaft und DeepSkyBlue ist der Wert.

Zwischen diesen drei Begriffen kann man verschiedene Sonderzeichen sehen: geschweifte Klammern, welche die Eigenschaft und den Wert einschließen, den Doppelpunkt, welcher Eigenschaft und Wert trennt und ein Semikolon nach dem Wert. Diese Sonderzeichen sorgen dafür, dass der Browser den CSS-Code einfachen parsen und verstehen kann. Innerhalb der geschweiften Klammern können beliebig viele Eigenschaften zu einem Selektor gruppiert werden. Der Doppelpunkt teilt dem Parser mit, wo die Eigenschaft endet und der Wert dazu beginnt. Das Semikolon dient zur Unterscheidung verschiedener Eigenschaften.

Das kann mit dem einfachen Selektor von zuvor etwas schwer nachzuvollziehbar sein, mit komplexeren Selektornamen sowie mit mehr Eigenschaften und unterschiedlichen Werten macht es jedoch mehr Sinn. Dazu ein komplexeres Beispiel:

h1, h2, h3 {
	color: DeepSkyBlue;
	background-color: #000;
	margin: 10px 5px;
}

h2 {
	color: GreenYellow;
}

Nun haben wir mehrere Selektoren. Der erste spricht gleich drei Elemente an und hat mehrere Eigenschaften und Werte. Dadurch kann man besser sehen, weshalb der Parser diese Sonderzeichen benötigt.

Formatierung und Whitespace in CSS

Du wirst dich vielleicht wundern, weshalb ich den Selektor in dieser Art formatiere: die erste geschweifte Klammer ist in der gleichen Zeile wie der Selektorname, die schließende in ihrer eigenen Zeile, Eigenschaften sind eingerückt, und hinter dem Doppelpunkt ist ein Leerzeichen. Warum? Das ist meine persönliche Präferenz. Dem CSS-Parser ist jegliche Art von Whitespace egal.

Manche präferieren es, die öffnende geschweifte Klammer in ihrer eigenen Zeile zu haben. Möglicherweise auch ein Leerzeichen vor dem Doppelpunkt:

h1
{
	color : DeepSkyBlue;
}

Diese Art der Formatierung funktioniert genau so gut. Es gibt außerdem Software, welche darauf ausgelegt ist, die Dateigröße von CSS zu reduzieren, was vor allem jeglichen Whitespace aus der Datei löscht:

h1{color : DeepSkyBlue;}

Und erneut funktioniert es ebenfalls einwandfrei. Bei komplexeren Regeln ist diese Formatierung jedoch schwer zu lesen und dadurch schwer zu bearbeiten. Für den Parser stellt dies jedoch kein Problem dar; er wird es nicht anders behandeln als das erste Beispiel. Dafür sorgen die Sonderzeichen.

Zusammenfassung

In diesem Kapitel haben wir die grundlegenden Strukturen von CSS gelernt: Selektoren, Eigenschaften und Werte. Ein CSS-Dokument kann beliebig viele Selektoren enthalten, und ein Selektor kann wiederum beliebig viele Eigenschaften enthalten, welche einen Wert haben. Wir haben außerdem gelernt, dass geschweifte Klammern, Doppelpunkte und Semikolons alle drei der Strukturen voneinander trennen, sowie dass Whitespace und Formatierung nach Belieben des Autors gewählt werden darf – dem Parser ist Whitespace egal.

Wir haben uns einige einfache Selektoren mit grundlegenden Eigenschaften angesehen. Selektoren sind jedoch ein weitgehendes Thema, und für Eigenschaften gibt es ebenfalls eine Menge. Beide Punkte werden wir im weiteren Verlauf des Tutorials behandeln.