class und id in HTML/CSS

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:

  • Was ist, wenn nur ein Absatz blau sein soll?
  • Was ist, wenn mehrere bestimmte Absätze gleich aussehen sollen?

Hier helfen id und class.

2. Die id

  • Eine id identifiziert genau ein Element
  • Eine id darf nur einmal pro Seite vorkommen

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

  • Eine class kann für viele Elemente verwendet werden
  • Sie wird genutzt, wenn mehrere Elemente gleich gestaltet werden sollen

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

  • Navigation
  • Header
  • Footer
  • einzelne spezielle Elemente

class

  • wiederverwendbare Styles
  • Buttons
  • Texte
  • Boxen

6. Zusammenfassung

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