Bisher haben wir festgelegt, dass alle HTML-Elemente vom Typ img horizontal zentriert werden.
Wir möchten jedoch nicht alle img-Elemente zentrieren. Auf der Startseite soll zum Beispiel das Bild, das den Haupteingang der Schule zeigt, zentriert werden, nicht jedoch das Bild mit dem Logo.
Daher werden wir gezielt die img-Elemente kennzeichnen, die zentriert dargestellt werden sollen. Dazu tragen wir in ihrem Attribut class den Klassennamen zentriert ein. Der Klassenname kann grundsätzlich frei gewählt werden, darf jedoch nicht mit einer Ziffer beginnen und keine Sonderzeichen enthalten.
In der CSS-Regel ersetzen wir den Typselektor img durch den Klassenselektor .zentriert. Ein Klassenselektor beginnt mit einem Punkt, auf den der Name der jeweiligen Klasse folgt.
Die CSS-Regel ist nun nicht mehr auf img-Elemente beschränkt, sondern gilt für jedes HTML-Element, dem die Klasse zentriert zugewiesen ist. Soll die CSS-Regel nicht für alle Elemente mit der Klasse zentriert gelten, sondern nur für Elemente, die vom Typ img sind, muss vor dem Klassenselektor .zentriert der Typselektor img angegeben werden.
Aufgabe 3-2: Klassenselektor
Aufgabe
Sorgen Sie dafür, dass die in der CSS-Datei styles.css enthaltene Regel, die Block-Elemente horizontal zentriert darstellt, den Klassenselektor zentriert erhält. Die Regel soll außerdem nicht auf img-Elemente beschränkt sein.
Weisen Sie dem img-Element, das auf der Startseite index.html den Haupteingang der Schule zeigt, die Klasse zentriert zu.