Mehrere Klassen einem Element (tag) zuweisen

Elemente können mehrere Klassen haben. Klassen können kombiniert werden wie im Beispiel unten.

normaler <p> tag

Der <p> tag ist ein Blockelement und entspricht immer der Breite des Eltern- Elementes. Der <p> tag darf keine anderen blockerzeugenden Elemente wie Überschriften, Textabsätze Tabellen oder Listen enthalten.

<p>Inhalt</p>

<p> tag eingerückt

In diesen Beispiel wird der <p> tag mit der Klasse "zitat" eingerückt.

<p class="zitat">Inhalt</p>

<p> tag mit oliver Schrift

In diesen Beispiel wird die Schriftfarbe des <p> tags über die Klasse "olive" geändert.

<p class="olive">Inhalt</p>

<p> tag mit oliver Schrift und eingerückt

Hier bekommt der <p> tag über die Klasse "olive" seine Schriftfarbe und wird über die Klasse "zitat" eingerückt.

<p class="olive zitat">Inhalt</p>

ID's und Klassen können kombiniert werden.

Eine ID kann zusätzlich mit einer oder mehreren Klassen kombiniert werden.
So können zum Beispiel auf einfache weisse Hintergrundbilder im Banner ausgewechselt werden, ohne dass für jedes Hindergrundbild die ID und deren Abhängingkeiten neu definiert werden müssen.

Beispiel: Das Hintergrundbild wird über die Klasse im CSS ausgewechselt
Xhtml
<div id="banner" class="produkte">
<div id="banner" class="ueberuns">

CSS
.produkte { background-image: url(images/produkte.jpg); } .ueberuns { background-image: url(/images/ueberuns.jpg); }