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>) 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, 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.

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

Sinn und Zweck von ID

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

Beispiel: Rahmen um die Steuerung und Hintergrundfarbe

<style type="text/css"> 
<!-- 
#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">  
Hier kommt mehr zum Thema html lernen und homepage erstellen … 
</div>

Hier kommt mehr zum Thema html lernen und homepage erstellen …

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. 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>

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.

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.

vorheriges Kapitel: Beispiele Box-Modell

nächstes Kapitel: DIV und SPANs