CSS - Klassen und IDs

In HTML und CSS helfen dir Klassen und IDs dabei, bestimmte Elemente gezielt zu gestalten. Dabei sind Klassen flexibel und mehrfach nutzbar, während IDs eindeutig sein müssen. Um strukturierte und wiederverwendbare Layouts zu erstellen, ist das Verständnis beider Konzepte ein wichtiger Schritt in der Webentwicklung.

Ich verwende IDs ausschließlich als Sprungziele innerhalb der Seite, zum Beispiel für Navigationslinks wie zum Start der Seite, Verschachtelung von Klassen oder Wann ich IDs verwende.

In HTML und CSS nutzt man Klassen (.klasse) und IDs (#id), um gezielt Elemente zu gestalten oder zu identifizieren. Beide dienen dazu, Elemente mit CSS zu gestalten – aber sie haben unterschiedliche Einsatzbereiche:

Die Klasse kann für mehrere Elemente gleichzeitig verwedet werden, während die ID nur einmalig gilt,
das bedeutet, dass die Klasse mehrfach verwendet werden kann, während die ID nur einmal pro Seite erlaubt ist.
Klassen können kombiniert, also verschachtelt werden.
Die Syntax in zB. einem <div> lauten class="meine-klasse" oder id="meine-id"

Klassen nutzt man, wenn man mehrere Elemente gleich gestalten möchte (z.B. mehrere Buttons, Absätze oder Boxen. IDs sind sinnvoll, wenn ein einziges Element besonders hervorgehoben oder z.B. Sprungmarken angesprochen werden soll. 

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Seitentitel</title>
<style>
.info-box {
  background-color: #0094ff;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
}

#besondere-box {
  background-color: #40fe2a;
  color: black;
  font-weight: bold;
}
</style>
</head>
<body>
<div class="info-box">Ich bin eine Box mit Klasse!</div>
<div class="info-box">Ich auch!</div>
<div id="besondere-box">Ich bin einzigartig mit einer ID!</div>
</body>
</html>
Beispiel bc004

Ergebnis:

  • Alle .info-box-Elemente erhalten die blaue Hintergrundfarbe.
  • Das eine Element mit id="besondere-box" wird grün hervorgehoben.

    • Verschachtelung von Klassen

    <!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Seitentitel</title>
<style>
.karte {
  background-color: #1e1e1e;
  color: #ffffff;
  padding: 20px;
  margin-bottom: 16px;
  border-radius: 10px;
  box-shadow: 0 0 8px #0094ff;
  font-family: 'Readex Pro', sans-serif;
  font-size: 1rem;
}

.wichtig {
  border: 3px dashed #fe4040;
  background-color: #2a0000;
  color: #ffaaaa;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
}
</style>
</head>
<body>
<div class="karte">Normale Karte</div>
<div class="karte wichtig">Wichtige Karte</div>
<div class="wichtig">Nur wichtig, keine Karte</div>
</body>
</html>
    Beispiel bc005

    Erklärung:

  • .karte hat ein allgemeines Layout für Boxen.
  • .wichtig hebt etwas visuell hervor – z. B. Warnung oder Priorität.
  • Die zweite Zeile (class="karte wichtig") kombiniert beide und zeigt, wie sich Stile addieren.

    • Wann ich IDs verwende

    Ich verwende IDs ausschließlich als Sprungziele innerhalb der Seite, zum Beispiel für Navigationslinks wie zum Start der Seite, Verschachtelung von Klassen oder Wann ich IDs verwende. Für das Styling und die Gestaltung von Elementen setze ich bewusst auf CSS-Klassen, da sie flexibler und mehrfach verwendbar sind. Klassen lassen sich kombinieren, mehrfach einsetzen und besser pflegen – darum sind sie für Layout und Design die bessere Wahl.