CSS – Grundlagen

CSS (Cascading Style Sheets) beschreibt die Darstellung von HTML-Inhalten.

CSS legt fest:

• Farben
• Schriftarten
• Abstände
• Layout
• Responsives Verhalten

HTML beschreibt was etwas ist, CSS beschreibt wie es aussieht.

—

Es gibt drei Möglichkeiten, CSS einzubinden.

—

<link rel="stylesheet" href="style.css">

Vorteile:

• saubere Trennung von Inhalt und Design
• wiederverwendbar
• wartbar

—

<style>
  body {
    background-color: white;
  }
</style>

Geeignet für:

• kleine Tests
• Einzelseiten

—

<p style="color:red;">Text</p>

⚠️ Nicht empfohlen:

• schwer wartbar
• überschreibt andere Regeln

—

selektor {
  eigenschaft: wert;
}

Beispiel:

p {
  color: black;
  font-size: 16px;
}

—

—

<p class="info">Text</p>
<p id="hinweis">Text</p>

.info {
  color: blue;
}

#hinweis {
  color: red;
}

Regeln:

• Klassen sind wiederverwendbar
• IDs sind eindeutig

—

CSS folgt einer klaren Priorität:

• Inline-CSS
• ID-Selektoren
• Klassen
• Element-Selektoren

Spätere Regeln überschreiben frühere, wenn die Spezifität gleich ist.

—

p {
  color: red !important;
}

⚠️ Nur im Ausnahmefall verwenden. Ein Zeichen für strukturelle Probleme.

—

/* Kommentar */

—

• externes CSS verwenden
• klare Klassennamen
• keine IDs für Styling missbrauchen
• Layout nicht mit Farbe verwechseln

—

CSS ist mächtig,

aber nur so gut wie die HTML-Struktur darunter.