CSS

Was ist CSS?

CSS (Cascading Style Sheets) ist die Sprache für das Design einer Website. Während HTML die Struktur vorgibt, bestimmt CSS z. B. Farben, Schriftarten, Abstände und Layouts.

Wozu braucht man CSS?

• Gestaltung: Farben, Schrift, Abstände, Größen
• Layout: Elemente anordnen
• Responsives Design: Darstellung für Handy, Tablet und PC
• Wartbarkeit: Design zentral ändern, ohne HTML umzuschreiben

Grundprinzip: Selektor + Eigenschaft + Wert

h1 {
  color: blue;
  text-align: center;
}

• Selektor: Was soll gestylt werden? (hier: h1)
• Eigenschaft: Was wird geändert? (hier: color)
• Wert: Wie wird es geändert? (hier: blue)

CSS wird in deinem Projekt über <link rel="stylesheet" href="style.css"> eingebunden.

Wichtige Selektoren

/* Tag-Selektor */
p { color: #111827; }

/* Klassen-Selektor */
.card { border: 1px solid #e5e7eb; }

/* ID-Selektor */
#btn { background: #2563eb; }

• Tag (z. B. p) gilt für alle entsprechenden Elemente.
• Klasse (.card) kann mehrfach verwendet werden.
• ID (#btn) ist eindeutig und wird oft mit JavaScript genutzt.

Box Modell: Padding, Border, Margin

In CSS besteht jedes Element aus einer Box. Besonders wichtig sind:

.box {
  padding: 16px;      /* Innenabstand */
  border: 1px solid #e5e7eb; /* Rahmen */
  margin: 16px;       /* Außenabstand */
}

Padding = Abstand innen, Margin = Abstand außen.