Dein erstes CSS: die Seite bekommt Farben

Lerne die CSS-Sprache kennen und sieh zu, wie deine Website nicht mehr aussieht wie aus 1995.

Zeig mir das: was CSS ist

HTML ist das Gerüst der Seite. CSS ist ihre Kleidung: Farben, Schriften, Größen, Abstände. Es wird in einer separaten Datei geschrieben und sieht so aus:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Lies es laut so: „Jede h1-Überschrift, färbe sie dunkelblau. Jeden p-Absatz, mach ihn 18 Pixel und dunkelgrau.”

Jede Regel hat drei Teile:

einen Selektor (h1) – worauf die Regel gilt,
eine Eigenschaft (color) – was wir ändern,
einen Wert (darkblue) – womit wir es ändern.

Doppelpunkt trennt Eigenschaft und Wert, jede Zeile endet mit Semikolon. Pass auf die Semikolons auf – ein vergessenes ist der häufigste CSS-Fehler der Welt.

Verbinden: sag deiner Seite von deinem CSS

Erstelle in deinem my-website-Ordner eine neue Datei namens style.css.
Füge in den <head> jeder HTML-Seite diese Zeile ein:
```
<link rel="stylesheet" href="style.css">
```
Das heißt: „Das Aussehen dieser Seite findest du in der Datei style.css.”
Teste, ob es funktioniert – setze in style.css etwas Unübersehbares:
```
body {
  background-color: yellow;
}
```
Speichern, Seite aktualisieren. Alles gelb? Es funktioniert! (Das Gelb darfst du jetzt wieder löschen.)

Farben in CSS

Farben kannst du als englische Wörter schreiben (red, darkblue, lightgray, tomato, gold…) oder genauer als Code mit Raute: #1d4ed8 ist blau, #16a34a ist grün. Mische Farben nach Belieben auf htmlcolorcodes.com.

Jetzt du 💪

Kleide deine Website in ihre ersten Farben. In style.css setze:

die Hintergrundfarbe der ganzen Seite (body),
die Farbe deiner Überschriften (h1, h2),
Größe und Farbe deiner Absätze (p).

Lösungen – die Farben darfst du natürlich anpassen:

🏫 Schulwebsite – Lösung

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Blau passt gut zu einer Schulwebsite – wirkt vertrauenswürdig (deshalb nutzen es auch Banken!).

🙋 Persönliche Website – Lösung

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

Eine persönliche Website darf mutiger sein – warmes Orange sagt „hier ist Leben”.

🌍 Reisetagebuch – Lösung

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Grün wie Wälder und Wiesen – perfekt für ein Reisetagebuch.

⚽ Vereinswebsite – Lösung

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Am besten deine Vereinsfarben – spielt ihr in Rot? Dann Rot!

⚠️

Lesbarkeits-Regel: dunkler Text auf hellem Hintergrund (oder umgekehrt). Hellgelb auf Weiß ist unleserlich. Wenn du unsicher bist, frag jemanden: „Kannst du das gut lesen?”

✅

Kontrolliere dich selbst: Deine Website hat eigene Farben – und weil dein CSS in einer Datei liegt, die mit jeder Seite verknüpft ist, wurden alle Seiten auf einmal eingefärbt. Clever, oder?

Das nimmst du aus dieser Lektion mit

CSS = das Aussehen. Geschrieben in style.css, verbunden mit <link> im <head>.
Die Regel: selektor { eigenschaft: wert; } – und vergiss die Semikolons nicht.
Eine CSS-Datei kleidet deine ganze Website auf einmal.