[Dieser Artikel wird noch überarbeitet]

Klassen sind Selektoren mit beliebigen Namen.

Eine kursive Überschrift
Eine kursive Überschrift mit Rahmen

In diesem Beispiel wird mit h1 { font-size:14px; font-style:italic; } für das

-Tag eine Schriftgröße von 14 Pixel und ein kursiver Schriftstil festgelegt.

Die nächste Zeile 1.gerahmt { border:1px solid #aaaaaa; } deklariert eine Klasse mit dem Namen gerahmt.

Um diese zu verwenden, musst Du in einem

-Tag das Attribut class mit dem Namen als Wert in Anführungszeichen einfügen. In diesem Beispiel ist das

.

Das Beispiel oben deklariert eine Klasse, die nur in einem

-Tag verwendet werden kann. Trägst Du die Klasse in einem anderen Tag ein, wird sie dort ignoriert. Du darfst das Tag vor dem Punkt aber auch weglassen, sodass die Klasse für alle Tags gültig ist, wie in dem folgenden Beispiel:

Eine kursive Überschrift
Eine kursive Überschrift mit Rahmen
 

Ein Text


Ein Text mit Rahmen


Ein Text, 14 Pixel groß


Ein Text, 14 Pixel groß

 

Diese Beispiel deklariert zwei Klassen: gerahmt und einfachertext. Da vor dem Punkt kein Tag angegeben ist, können diese Klassen in jedem Tag verwendet werden. Wichtig ist, dass Du bei der Deklaration vor dem Namen den Punkt verwendest, als Wert in dem class-Attribut jedoch nicht.

Das nächste Beispiel weist einem Element mehrere Klassen zu:

Ein roter Text


Ein fetter Text


Ein unterstrichener Text


Ein Text, rot und unterstrichen


Ein Text, fett und unterstrichen


Ein Text, rot, fett und unterstrichen

Diese Beispiel deklariert die drei Klassen: rot, ul und fett.

Um diese Klassen nun für ein Element zu kombinieren, brauchst du sie nur in dem class-Attribut durch Leerzeichen getrennt anzugeben.