CLASS und ID - Bezeichner für CSS-Elemente

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 (<p>) und Hervorhebungen (<strong>) gezeigt.

Beispiel:

<p class="inhalt">Text</p>  
<strong class="inhalt">Text</strong>

<p id="inhalt">Text</p>
<strong id="inhalt">Text</strong>

Das besondere an CLASS ist, dass damit mehrere Elemente ausgezeichnet werden können, dagegen die ID nur für ein Element pro HTML-Seite verwendet werden darf. ID dient 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>
.textmarkergelb {
  background-color:yellow;
}
</style>  

im Beispiel wird diese  
<strong class="textmarkergelb">Stelle im Text</strong>
mit einer Art
<strong class="textmarkergelb">Textmarker</strong> 
hervorgehoben. 

Das Ergebnis im Browser sieht dann wie folgt aus:

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

Sinn und Zweck von ID

Elemente, die es nur einmal gibt, z.B. die Steuerung, können so mit einer ID und dem dazugehörigen CSS-Design ausgestattet werden.

Beispiel: Rahmen um die Steuerung und Hintergrundfarbe:

<style>
#navi {
    background-color:silver;
    border:2px dotted orange;
    float:left;
}
</style>

<div id="navi">
    <ul>
        <li><a href="index.htm">Startseite</a></li>
        <li><a href="impressum.htm">Impressum</a></li>
    </ul>
</div>

<div id="inhalt">
<p>Hier kommt mehr zum Thema HTML lernen und Websites erstellen …</p>
</div> 

Die Ausgabe im Browser:

Hinweis: Bei IDs wird in der CSS-Definition vor dem Namen ein # geschrieben!

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. 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, 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. folgendes gemacht, gewinnt die Farbe Orange:

<style>
.gelb {
  background-color:yellow;
}
#orange {
  background-color:orange;
} 
</style>  

<p id="orange" class="gelb">Welche Farbe gewinnt?</p>

Diese Konstruktion zeigt, dass für einen Bereich sowohl ein id-Selektor als auch ein Klassen-Selektor angewendet werden kann (macht in manchen Fällen Sinn und das Leben einfacher). Wobei man hier natürlich keine Farben zuweist, die sich widersprechen. Das obige Beispiel ist nur zur Demonstration, dass es möglich ist und wer mehr Gewicht von den beiden Selektoren hat und somit gewinnt. Je nach erstelltem Design kann es aber zweckmäßig sein, beide Selektoren zu nutzen.

Zu FLOAT: gibt es mehr in einem folgenden Kapitel.

TIPP: Die Definition der CSS-Style-Sheets erfolgt am besten in einer externen Datei, damit die Definition nur einmal gemacht werden muss und in beliebig viele HTML-Seiten eingebunden werden kann.