Selektoren

Es gibt einige Möglichkeiten, wie wir die betreffenden HTML-Tags selektieren können. Hier einige der häufig genutzten. Eine vollständige Liste findest Du unter CSS Selektoren.

HTML-Element

Es wird einfach der HTML-Tag hingeschrieben, das bezieht sich dann auf alle diese Tags. Zum Beispiel auf alle Absätze <p> im Dokument.

p { eigenschaft: wert; }

Klassen-Selektor

Einem HTML-Element kann mit dem Attribut "class" eine Klasse zugeordnet werden.

<p class="absatz">Text</p>

Damit können wir alle Tags ansprechen, welche diese Klassen-Bezeichnung haben. Allerdings müssen wir im CSS ein Punkt davor schreiben.

.absatz { eigenschaft: wert; }

Das bedeutet, dass mehrere HTML-Tags damit angesprochen werden können.

<p class="absatz">Text</p>
<strong class="absatz">Text2</p>

Es ist auch möglich die Klassen auf einen bestimmten Tag zu beschränken, indem der Tag vor den Punkt geschrieben wird.

p.absatz { eigenschaft: wert; }

Das bedeutet, dass die Eigenschaft nur noch für Absätze <p> gilt, welche die Klasse "absatz" bekommen haben. Das <strong> im oberen Beispiel würde dann nicht mehr davon betroffen sein.

Einem Tag können auch mehrere Klassen zugewiesen werden, welche dann gleichzeitig gelten. Diese werden dann mit einem Leerzeichen getrennt.

<p class="absatz fett">Text</p>

In diesem Beispiel gelten beide Klassen "absatz" und neu "fett", welcher natürlich per CSS auch erst definiert werden müsste.

ID-Selektor

Einem HTML-Tag kann mit dem Attribut "id" eine eindeutige ID zugeordnet werden. Diese darf in einem Dokument nur einmal vorkommen.

<p id="slogan">Text</p>

Im CSS schreiben wir eine Raute vor den Namen.

#slogan { eigenschaft: wert; }

CodeZone

CSS

HTML

Auf Testzone anwenden