class und id
logo5

CSS-Elemente können über diese beiden "Bezeichner" angesprochen werden. Dazu werden die HTML-TAGs um das Attribut class="klassenname" bzw. id="idname" erweitert. Im folgenden Beispiel wird das anhand von Absätzen (<div>) gezeigt.

Beispiel:

<div class="inhalt">Text</div> 

<div id="inhalt"> Text</div>

Das besondere an CLASS ist, das damit mehrere Elemente ausgezeichnet werden können, dagegen die ID nur für 1 einziges Element pro Seite verwendet werden darf. ID ist also zur eindeutigen Bestimmung eines Elementes.

Sinn und Zweck von CLASS

Über die Klassen können wiederholende Designelemente bestimmt werden, im folgenden Beispiel werden im Text mehrere Stellen mit einer Art Textmarker hervorgehoben.

<style type="text/css">
.textmarkergelb {
  background-color:yellow;
}
.textmarkerrot {
  background-color:red;
} 
</style>  im Beispiel wird diese  
<strong class="textmarkergelb">Stelle im Text</strong>mit einer Art
<strong class="textmarkerrot">Textmarker</strong> hervorgehoben. 

im Beispiel wird diese Stelle im Text mit einer Art Textmarker hervorgehoben.

Die Bezeichnungen <style type="text/css"> bzw. </style> braucht man nur, wenn man die Formatierung in den head-Bereich der html-Seite schreibt,
im externen css-File nicht!!

Hinweis: für Classen wird in der CSS-Definition vor dem Namen ein Punkt geschrieben (für ID ein # - siehen unten).

ID-Selektor und Klassen-Selektor

Die korrekte Bezeichnung ist ID-Selektor für id="" bzw. Klassen-Selektor für class="". Wichtig ist hier das Verständnis und falls man sich mit jemanden unterhält, dass man das Kind beim Namen nennen kann.

Die vergebenen Namen dürfen keinerlei Sonderzeichen und Umlaute (öäüß) enthalten und keine Leerzeichen. Und die Namen sind „case sensitiv“ – sprich Groß- und Kleinschreibung macht einen Unterschied. Also am besten alles klein schreiben.

Warum überhaupt beide anwenden?

Die Frage, warum nicht alles mit class gemacht wird ist berechtigt – die Antwort ist, daß es nicht von gutem Stil zeugt und es geschickter ist, wenn man auf einen Blick sieht, was einmalige Bereiche sind. Weiterhin haben id-Bereiche mehr Gewicht. Wird z.B. folgende gemacht, gewinnt die Farbe Orange:

<style type="text/css">
.gelb {
  background-color:yellow;
}
#orange {
  background-color:orange;
} 
</style>  
<p id="orange" class="gelb">Welche Farbe gewinnt?</p>
Siehe oben ;))

Diese gezeigte Konstruktion, dass für einen Bereich sowohl ein id-Selektor wie auch ein Klassen-Selektor angewendet werden, kann vorkommen. Wobei natürlich man nicht hier Farben zuweist - das obige Beispiel ist nur zur Demonstration, dass es möglich ist und wer mehr Gewicht hat und gewinnt. Je nach erstelltem Design kann es aber zweckmäßig sein, beide Selektoren zu nutzen.