Klassen

Eine Klasse ist in CSS - einfach gesagt - eine Gruppierung von Eigenschaften, die einmal definiert wird und in der Regel mehrmals verwendet wird.
Klassen können in CSS mehrfach angewendet werden. IDs dagegen können aufgrund der Eigenschaft immer eindeutig identifizierbar zu sein, nur einmal pro Seite verwendet werden. Klassen und IDs dürfen in CSS nicht miteinander kombiniert werden.

Globale Klassen definieren

Beispiel - Definition in css

.hinweis {
font-style: italic;
}

Beispiel in Kombination mit dem <p> Tag:

<p class=”hinweis”> Der erste Absatz, der kursiv formatiert ist. </p>

Tag-spezifische Klassen definieren

Klassen nur für bestimmte Tags definieren

Beispiel - Definition in css

p.hinweis {
font-style: italic;
}

Gilt nur in Verbindung mit der Klasse ”hinweis” und dem Tag <p>:

<p class=”hinweis”> Der erste Absatz, der kursiv formatiert ist. </p>

Hier würde die ”hinweis“ Definition nicht greifen:

<h1 class=”hinweis”> Der erste Absatz, der kursiv formatiert ist. </h1>

Pseudo-Klassen und Pseudo-Elemente definieren

Pseudo-Klassen werden in CSS definiert, aber nicht explizit in dem HTML Dokument verwendet. Beispiel hierfür sind die Definition von noch nicht besuchten und bereits von dem Nutzer besuchten Links.

Beispiel - Definition in css

a:link {
color:lime;
}

a:visited {
color:yellow;
}

Hinweis:

Pseudo-Klassen:

:link – Definition von noch nicht besuchten Links
:visited – Definition von besuchten Links

Pseudo-Elemente

:first-line – Definition der ersten Zeile (eines Paragraphen)
:first-letter – Definition des ersten Buchstaben (eines Paragraphen)