Es kommt häufig vor, dass ein Element (z.B. ein Absatz oder eine Tabelle) in einem Projekt in verschiedenen Formatierungen benötigt wird.
Dieser Abschnitt ist mit einer Klasse "kursiv_blau" formatiert.
<p class="kursiv_blau">Dieser Abschnitt ist mit einer Klasse "kursiv_blau" formatiert.</p>
Dieser Abschnitt ist mit einer Klasse "kursiv_rot" formatiert.
<p class="kursiv_rot">Dieser Abschnitt ist mit einer Klasse "kursiv_rot" formatiert.</p>
In der CSS-Datei sehen die Formatierungen so aus:
.kursiv_blau {
font-style: italic;
color: #0000FF;
}
.kursiv_rot {
font-style: italic;
color: #FF0000;
font-weight: bold;
}
Alle Formatierungen für den <p>-Tag werden von den Voreinstellungen übernommen. Color, font-style und font-weight werden überschrieben.
Für die Formatierung des Tags wird das Attribut class verwendet.
In der CSS-Datei werden Klassen durch einen vorgestellten Punkt gekennzeichnet.
Es lassen sich auch Formate für bestimmte Tags festlegen.
| Überschrift 1 | Überschrift 2 |
| Inhalt | Inhalt |
<td class="rahmen_einfach">Überschrift 1</td>In der CSS-Datei steht dann:
td.rahmen_einfach {
border: 1px solid #0000FF;
}
| Überschrift 3 | Überschrift 4 |
| Inhalt | Inhalt |
<td class="rahmen_punkte">Überschrift 3</td>In der CSS-Datei steht dann:
td.rahmen_punkte {
border: 1px dotted #FF00FF;
}
Möchte man eine Formatierung für mehrere Tags anwenden, kann man die Klassen durch Komma trennen. Z.B. ist es sinnvoll, <td> und <th> den gleichen Rahmen zu verpassen:
td.rahmen_einfach, th.rahmen_einfach {
border: 1px solid #0000FF;
}