Rule Sets

In den vorherigen Abschnitten haben wir uns angesehen, wie wir Inhalte mit HTML auszeichnen können. Im Browser sieht das Ganze noch etwas langweilig aus. Dennoch unterscheiden sich einzelne Elemente visuell bereits leicht voneinander. Beispielsweise werden Überschriften größer und im Fettdruck dargestellt. Mittels CSS haben wir die Möglichkeit, die Gestaltung weitergehend zu beeinflussen.

Betrachten wir ein einfaches Beispiel mit nur zwei HTML-Element:

Mit wenigen Zeilen CSS-Code haben wir die Schriftart und die Farbe der Überschrift vom Standard (schwarz) zu blau geändert. In der CSS-Terminologie werden diese vier Zeilen als ein rule set bezeichnet. Allgemein können wir daraus wieder die folgende Struktur ableiten:

selector {
    property-1: value-1;
    property-2: value-2;
    ...
}

Ein rule set besteht aus einem Selektor (oder engl. selector) und mehreren Deklarationen (declarations). Eine Deklaration besteht – ähnlich wie HTML-Attribute – immer aus einem Eigenschafts-Namen und einem entsprechenden Wert, der der Eigenschaft zugewiesen wird.

In den meisten Fällen wollen wir nicht gleich die Gestaltung aller Elemente einer Webseite beeinflussen, sondern nur die einiger ausgewählter Elemente. Im obigen Beispiel haben wir lediglich die Farbe und Schriftart der Überschrift geändert. Mithilfe von Selektoren schränken wir die nachfolgenden Deklarationen auf bestimmte Elemente unserer Webseite ein – in diesem Fall auf die Überschriften erster Ebene.

Zwischen den zwei geschweiften Klammern können eine oder mehrere Deklarationen stehen. Jede Deklaration betrifft jeweils genau eine Eigenschaft.

Eine Eigenschaft kann z. B. die Schriftart, die Schriftfarbe oder auch der Abstand vor oder nach einem Element zu anderen Elementen sein.