CSS-Elemente können über diese beiden "Bezeichner" angesprochen werden. Dazu werden die HTML-TAGs um das Attribut class="klassenname" oder 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, dass damit mehrere Elemente ausgezeichnet werden können, dagegen die ID nur für ein 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 # – siehe unten).
ID-Selektor und Klassen-Selektor
Die korrekte Bezeichnung ist ID-Selektor für id="" und Klassen-Selektor für class="". Wichtig ist hier das Verständnis und falls man sich mit jemandem 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 kleinschreiben.
Warum überhaupt beide anwenden?
Die Frage, warum nicht alles mit class gemacht wird, ist berechtigt – die Antwort ist, dass 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 als 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.