Navigation überspringen

Elementadressierung via id und class

Benötigtes Vorwissen

Schüler-Autoren dieses Artikels sind Jan Beening und Nils Liesegang

Es gibt mit dem class- und dem id-Bezeichner zwei Möglichkeiten HTML-Elemente in CSS-Dateien zu selektieren. Selektieren bedeutet, dass nicht mehr ein beliebiger HTML-Tag in der CSS-Datei genannt wird und somit alle Elemente dieses Typs verändert werden, sondern dass einzelne Elemente formatiert werden oder eine begrenzte Anzahl an Elementen formatiert wird.

1. class-Bezeichner

Der CLASS-Bezeichner sorgt dafür, dass alle Elemente, die mit dieser Klasse ausgezeichnet sind, eine bestimmte Formatierung annehmen. Dieser Selektor wird in einem HTML-Tag mit class=“klassenname“ angegeben. In der CSS-Datei wird eine Klasse mit einem Punkt vor dem Klassennamen eingeleitet.

Beispiel:

HTML-Datei:

<body>

<div class="klassenname">Beispiel</div>

</body>

CSS-Datei:

.klassenname{

background-color: #ffffff;

}

In diesem Beispiel wird ein Container mit der Klasse „klassenname“ ausgestattet. In der CSS-Datei wird festgelegt, dass die Hintergrundfarbe dieses Containers weiß ist. Alle weiteren Elemente, die diese Klasse erhalten, werden ebenfalls mit einer weißen Hintergrundfarbe ausgestattet.

2. id-Bezeichner

Der ID-Bezeichner sorgt dafür, dass ein bestimmtes Element eine bestimmte Formatierung annimmt. Dieser Selektor wird in einem HTML-Tag mit id=“idname“ angegeben. In der CSS-Datei wird eine ID mit einem # eingeleitet. Im Gegensatz zum Klassenbezeichner ist eine ID nur einmal in einem Script einsetzbar.

Beispiel:

HTML-Datei:

<body>

<div id="idname">Beispiel</div>

</body>

CSS-Datei:

#idname{

background-color: #000000;

}

In diesem Beispiel wird in der HTML-Datei ein Container mit der ID „idname“ erstellt. In der CSS-Datei wird festgelegt, dass die Hintergrundfarbe des Containers schwarz ist. Die Bezeichnung dieser ID darf im ganzen Script nicht noch einmal verwendet werden.

Wichtig für beide Möglichkeiten:

Die vergebenen Namen dürfen keine Sonderzeichen und Umlaute enthalten. Gleichzeitig dürfen keine Leerzeichen enthalten sein. Wenn ein Bezeichner unterteilt werden soll, ist dies zum Beispiel mit einem Unterstrich zu erreichen. Außerdem sind die bezeichnenden Namen case-sensitive, was bedeutet, dass Groß- und Kleinschreibung einen Unterschied machen.

Aufgabe 1

Autoren: Jan Beening und Nils Liesegang

Erstellen Sie in einer HTML-Datei fünf Container, welche alle über einen roten Hintergrund verfügen, mit einem Abstand von 5px nach oben voneinander getrennt sind und eine Höhe und Breite von 200px haben. Machen Sie dies mithilfe eines class-Bezeichners. Der letzte Container soll im Gegensatz zu den anderen einen Kreis darstellen. Machen Sie dies mithilfe einer ID.