8. KLASSEN IN CSS DEFINIEREN

Die folgende CSS-Anweisung besagt, dass alle Absätze einer Webseite in der Farbe Blau und der Schriftgrösse 15 Pixel dargestellt werden:

 
p{
    color:  blue;
    font-size:  15px;
}

Was ist aber, wenn Sie beispielsweise einzelne Zeilen oder Wörter in roter Farbe darstellen möchten? Dieses Problem lässt sich durch das Anlegen von Klassen lösen. Im folgenden Beispiel werden im Text mehrere Stellen mit einer Leuchtstift hervorgehoben. Dazu wird das HTML-Tag (Selektor in CSS) um das Attribut class="textmarkergelb" erweitert.

 
p.GelberLeuchtstift {
     background-color:  yellow;
}

p.RoterLeuchtstift {
     background-color:  red;
}

In der HTML-Datei wird dann das HTML-Tag mit dem Attribut class="GelberLeuchtstift" erweitert. Damit lassen sich einzelne Wörter oder Passagen im Text rot oder glelb markieren.

leuchtstift mit css class erstellen

Wenn eine Klasse ohne die Angabe eines bestimmten HTML-Tag (Selektor in CSS) definiert wird, dann kann diese Formatierung jedem HTML-Tag einer Webseite zugewiesen werden.

Leuchtstift mit css Klassen erstellen
 
.Leuchtstift {
      background-color:yellow;
}

In der HTML-Datei kann dann jedes beliebige HTML-Tag mit dem Attribut class="Leuchtstift" erweitert werden. So zum Beispiel die Überschrift < h1 >, Absatz < p >.

CSS Klassen in einer HTML Tabelle

Es ist auch erlaubt, im Zusammenhang mit HTML-Tags mehrere Formatierungen mit gleichem Klassennamen festzulegen.

 
h1.Leuchtstift{
     background-color:red;
}

p.Leuchtstift {
     background-color:yellow;
}