Die Syntax ist folgende:

Selektor {
    Eigenschaft1: Wert;
    Eigenschaft2: Wert;
    ...
}		 SelektorA, SelektorB {
    Eigenschaft: Wert;
}

Beispiel:

h1 {
    color: grey;
    text-align: right;
}

Beispiel:

h1, h2 {
    color: grey;
}
Der Hauptüberschrift h1 wird die Schriftfarbe Grau zugewiesen und sie wird rechtsbündig sein. Den Überschriften h1 und h2 wird die Schriftfarbe Grau zugewiesen.

Es sind u.a. folgende Selektoren wichtig:

Typselektoren

Wie in obigen Beispielen wird ein HTML-Element direkt selektiert.

Weiteres Beispiel:

p { border: 1px solid; }

(Alle Absätze (paragraph) werden mit einer 1 Pixel starken soliden Linie umrandet.)

Klassenselektoren

Mehrere HTML-Elemente können einer Klasse zugeordnet werden, die als Selektor dient.

Beispiel:

.usertext {font-style: italic }

Nun werden alle HTML-Elemente, die der Klasse usertext angehören kursiv dargestellt:

<h3 class="usertext">Überschrift eines Benutzerbeitrags</h3>
<p class="usertext">Diesen Beitrag hat ein Benutzer verfasst.</p>

ID-Selektoren

Ein einzelnes HTML-Element erhält eine eindeutige ID, welche selektiert wird.

#id123 {color: red }
#id124 {color: green }

Nun werden alle HTML-Elemente, die die entsprechende ID haben speziell dargestellt:

<h1 id="id123">Rote Überschrift</h1>
<h1 id="id124">Grüne Überschrift</h1>

Eine ID darf dabei nur einmal vorkommen!

Last modified: Thursday, 1 October 2015, 12:08 PM