Mit CSS können Sie Selektoren definieren, die eine bestimmte Art oder Klasse von Elementen auswählen. Diese Klassenselektoren werden verwendet, um bestimmten Teilen einer Seite ein bestimmtes Aussehen zu geben.
Um in Ihrer HTML-Seite einen Absatz der Klasse „frage" zu erstellen, erstellen Sie zunächst wie gewohnt mit den Tags <p></p> einen Absatz. Zusätzlich fügen Sie im einleitenden Tag das Klassenattribut ein, in derselben Weise, wie jedes andere Attribut: <p class="frage">.
Alle Absätze auf der Seite, die das Klassenattribut mit dem Wert „frage" enthalten, werden durch die Selektoren .frage oder p.frage ausgewählt.
Es gibt zwei Arten von Klassenselektoren:
Allgemeine Klassenselektoren, die unabhängig vom Typ alle Elemente einer bestimmten Klasse auswählen, d. h., Absätze, Tabellen und alle anderen Elemente der jeweiligen Klasse:
.frage {font-weight: bold}
Dieser Selektor wählt alle Elemente auf der Seite aus, die zur Klasse „frage" gehören.
Elementspezifische Klassenselektoren, die nur bestimmte Typen von Elementen mit der jeweiligen Klasse auswählen, zum Beispiel nur Absätze, aber nicht Tabellen oder andere Elemente. Dieser Selektor hat die Form element.klassenname, also zuerst der Name des Elements, dann ein Punkt, dann der Name der Klasse.
Absatzspezifische Klassenselektoren werden wie im folgenden Beispiel definiert:
p.frage {font-weight: bold}
Dieser Selektor wählt nur Absätze der Klasse „frage" aus und keine anderen Elemente der Klasse „frage" oder Absätze, die nicht zur Klasse „frage" gehören.
Klassennamen dürfen nur alphanumerische Zeichen und Bindestriche enthalten. Andere Zeichen wie etwa Unterstreichungszeichen oder Leerzeichen sind nicht erlaubt. Klassennamen dürfen nicht mit einer Ziffer beginnen.