CSS Webdesign id oder class?

Für Selektoren, Elemente (siehe vorhergehendendes Tutorial) können mit id oder class eigene Namen (Attribute) vergeben werden. Die Frage ist also wann verwendet man id und wann class? Eine eindeutige ID darf nur einmal im html-text verwendet werden, eine class kann auf einer Webseite beliebig oft verwendet werden. Beide Formen sollen die Bedeutung des  betreffenden Elementes der Webseite beschreiben.

Ein und die selbe ID nur einmal

ID ist die Kurzform für Identität. Ein und die selbe ID darf nur einmal auf der Webseite verwendet werden. Man nimmt sie für die Hauptbereiche, wie den Textblock, den Fußbereich, etc. Beispiel:
<div id="kopfbereich">
...
</div><!-- Ende Kopfbereich-->
Im Stylesheet wir per CSS dieser Bereich wie folgt formatiert:
#kopfbereich {  color:black; background-color: #f3c600; }
Eine ID erhält im Stylesheet eine Raute # vorangesetzt.

Class - der Selektor mit dem Punkt

Klassen werden eingesetzt, um ganz spezielle Bereiche innerhalb der Webseite  formatieren zu können. Im Buch Webseiten gestalten mit CSS (siehe unten) wird das schöne Beispiel angeführt, dass jeder Absatz, der in der HTML Seite wie eine grau hinterlegte und mit einem Rahmen versehene Box aussehen soll, ein class Attribut erhält. Beispiel:
<p class="hinweisbox" > Dieser Absatz schaut aus  wie eine Hineweisbox</p>
Im CSS werden nun alle so beschriebenen Stellen z.B. wie folgt formatiert:
.hinweisbox {  color:black; background-color: #8c8c8c; border:3px solid #ecf7dd;}
Eine class erhält im Stylesheet ein Punkt .  vorangesetzt.


Die Anleitung orientiert sich an dem Buch little boxes Webseiten gestalten mit CSS Grundlagen.
Von dem Autor sind die nachfolgenden Titel verfügbar:

Nach oben