Klassen und IDs: Deine eigenen Anker
Elementnamen wie p oder h2 treffen immer alle Exemplare. Sollen nur bestimmte Elemente anders aussehen, brauchst du eigene Markierungen: Klassen und IDs. Beide werden im HTML als Attribut vergeben und im CSS als Selektor angesprochen.
So sieht das aus
HTML
<p class="hinweis wichtig">Vorher speichern!</p>
<footer id="seitenfuss">...</footer>CSS
.hinweis { background: #FFFFCC; padding: 10px; }
.wichtig { border: 1px solid #CC0000; }
#seitenfuss { text-align: center; }Der Unterschied in einem Satz
Eine Klasse darf beliebig oft vorkommen und ein Element darf mehrere tragen (mit Leerzeichen getrennt, wie oben). Eine ID ist ein Eigenname: pro Seite genau einmal, pro Element genau eine. Aus dieser Natur ergibt sich die Arbeitsteilung: Klassen sind wiederverwendbare Styling-Bausteine, IDs markieren einmalige Dinge.
Warum fürs Styling fast immer Klassen?
- Wiederverwendbar: Die Hinweisbox von oben funktioniert an zehn Stellen, eine ID nur an einer.
- Kombinierbar: Mehrere Klassen ergeben zusammen den Look, wie Bausteine.
- Friedlich: IDs haben brutale Spezifität und übersteuern Klassen. Ein Stylesheet voller ID-Regeln wird zur Eskalationsspirale, in der irgendwann !important regirt.
Wofür IDs dann? Für alles wo Einmaligkeit der Punkt ist: Sprungziele für Links (href="#kapitel3"), die Verknüpfung von label und Feld, JavaScript-Zugriffe. Dort sind sie unersetzlich, nur eben nicht als Styling-Standardwerkzeug.
Gute Namen vergeben
Benenne nach der Aufgabe, nicht nach dem Aussehen: .hinweis statt .gelbe-box, .fehler statt .rot. Denn wehe die gelbe Box wird nächstes Jahr blau, dann lügt der Name für immer. Kleinschreibung mit Bindestrichen hat sich als Konvention durchgesetzt (.nav-links, .btn-gross), Umlaute und Leerzeichen habn in Klassennamen nichts verloren.
Typische Fehler
- Dieselbe ID mehrfach vergeben. Der Validator meckert zurecht.
- Für jedes Element eine neue Klasse erfinden statt vorhandene wiederzuverwenden.
- Klassen an alles kleben, auch wo ein schlichter Elternselektor (
nav a) reichen würde.
Weiter im Lernpfad: Farben · Verwandt: HTML-Attribute