Um Styles effektiv anzuwenden, ist ein Verständnis von CSS-Selektoren erforderlich. Sie bestimmen, welche HTML-Elemente für das Styling ausgewählt werden. Im Folgenden werden die wichtigsten Selektortypen vorgestellt.

Tag-Selektor

Eine Möglichkeit, Styles anzuwenden, ist die Verwendung des Element-Tags selbst. Styles, die mit einem Tag-Selektor angegeben werden, wirken sich auf alle Elemente mit diesem Tag aus. Dies ist nützlich, um einheitliches Styling für Elemente auf der gesamten Website zu gewährleisten.

Syntax: Im HTML gibt es ein p-Element:

<p>It was all in my head.</p>

Um Styles in der CSS-Datei anzuwenden, wird der Tag-Name (p) als Selektor verwendet:

p {
  property: value;
}

Führen Sie das folgende Beispiel aus und prüfen Sie das Ergebnis.

Klassenselektor

Eine präzisere Methode zur Gestaltung von Elementen ist die Verwendung von Klassenselektoren. Diese Selektoren richten sich an Elemente mit bestimmten Klassennamen und ermöglichen eine gezielte Anwendung von Stilen.

Syntax: Im HTML wird ein class-Attribut mit einem aussagekräftigen Klassennamen hinzugefügt:

<p class="text">This song is another hit.</p>

Im CSS wird der Klassenname mit einem Punkt (.) referenziert, um die Stile zu definieren:

.text {
  property: value;
}

Das folgende Beispiel zeigt, dass nur Elemente mit der Klasse text diese Stile erhalten, was eine präzisere Kontrolle über das Styling ermöglicht.

Alle Elemente mit dem Attribut class="text" werden mit rotem Text, einer Schriftgröße von 24px und einem Hintergrund in der Farbe Wheat gestaltet. Der Klassenname text ist in index.css mit einem vorangestellten . definiert.

Klassenkomposition

Mehrere Klassen können auf ein einzelnes Element angewendet werden, wodurch die Klassenkomposition ein leistungsstarkes Werkzeug zur Stilzuweisung darstellt – einzelne Klassennamen werden im class-Attribut durch Leerzeichen getrennt.

Syntax: Im HTML werden mehrere Klassennamen zu einem Element hinzugefügt:

<p class="text font">A robot created chemicals.</p>

Im CSS werden die Stile für jede Klasse separat definiert:

.text {
  property: value;
}

.font {
  property: value;
}

Das folgende Beispiel zeigt die Funktionsweise. Elemente mit den Klassen text und font erhalten die jeweils definierten Stile.

Das <p>-Element mit den Klassen text und font erhält Stile von beiden Selektoren. Die Klasse text setzt die Farbe auf navy, und die Klasse font legt die Schriftgröße auf 24px fest.

Id-Selektor

Obwohl der id-Selektor zum Stylen verwendet werden kann, wird dies im Allgemeinen nicht empfohlen. Ids sollten auf einer Seite eindeutig sein, was ihre Wiederverwendung einschränkt.

Syntax: Im HTML wird einem Element ein id-Attribut hinzugefügt:

<p id="title">Choose from different themes.</p>

Im CSS wird die id mit einem Hashtag (#) referenziert, um die Stile zu definieren:

#title {
  property: value;
}

Das folgende Beispiel demonstriert die Funktionsweise. Hier werden Stile auf das eindeutige Element mit der id title angewendet.

Das Attribut id="title" identifiziert das <p>-Element eindeutig, und die mit dem Selektor #title definierten Stile gelten ausschließlich für dieses spezifische Element.