CSS

CSS steht für Cascading Style Sheets. CSS steuert Aussehen und Layout einer Webseite.

Aufgabe von CSS

Mit CSS legt man fest:

• Farben
• Schriftarten
• Schriftgrößen
• Abstände
• Rahmen
• Formen
• Layout
• Hover-Effekte
• Responsive Verhalten

HTML beschreibt die Struktur. CSS gestaltet diese Struktur.

CSS-Syntax

p {
  font-size: 1.2em;
  color: blue;
}

Bestandteile:

Selektoren

CSS einbinden

Externe CSS-Datei:

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

Interner Stilblock:

<style>
  body {
    font-family: Arial, sans-serif;
  }
</style>

Inline-Stil:

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

Externe CSS-Dateien sind für wartbare Projekte meist die bessere Wahl.

Kaskade und Spezifität

"Cascading" bedeutet, dass mehrere Regeln auf dasselbe Element wirken können. Welche Regel gewinnt, hängt ab von:

• Reihenfolge
• Spezifität
• Herkunft der Regel
• !important, falls verwendet

Margin und Padding

.card {
  margin: 1rem;
  padding: 1.5rem;
}