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.