class und id in HTML/CSS

1. Einstieg: Problem erzeugen

Gegeben ist folgender html-Code sowie css: 

<p>Willkommen auf meiner Seite</p>
<p>Heute ist ein schöner Tag</p>
<p>Dieser Text ist wichtig</p>
p {
    color: blue;
}
Ergebnis: Alle Absätze sind blau.

Frage:

Hier helfen id und class.

2. Die id

HTML: 

<p id="wichtig">Dieser Text ist wichtig</p>
CSS: 

#wichtig {
    color: red;
    font-weight: bold;
}

Teil Bedeutung
id="wichtig" Name der ID
#wichtig Zugriff im CSS

3. Die class

HTML: 

<p class="info">Willkommen auf meiner Seite</p>
<p class="info">Heute ist ein schöner Tag</p>
CSS: 

.info {
    color: green;
}

Teil Bedeutung
class="info" Name der Klasse
.info Zugriff im CSS

4. Mehrere Klassen

Ein Element kann mehrere Klassen haben.

HTML: 

<p class="info gross">Willkommen</p>
CSS: 

.info {
    color: green;
}
 
.gross {
    font-size: 24px;
}

5. Typischer Einsatz

Kurze Regel:

id

class

6. Zusammenfassung

Merkmal id class
Verwendung genau einmal beliebig oft
CSS-Syntax #name .name
Beispiel id="header" class="button"