04 – Farben & Vererbung 🎨

Verstehe, wie Farben wirken – und sich verbreiten

🎯 1. Einleitung & W3Schools

In Kapitel 04 hast du gelernt, wie Farben in CSS definiert werden, was Vererbung bedeutet und warum Maßeinheiten wichtig sind.

Vertiefe dein Verständnis auf W3Schools – lies aktiv, probiere aus, denke nach:

🔗 W3Schools – CSS Colors
🔗 W3Schools – CSS Inherit
🔗 W3Schools – CSS Units

🧠 2. KI-Prompt-Training – verstehen statt abfragen

Deine Aufgabe: Formuliere einen Prompt, der keine Farbwerte liefert, sondern dir hilft, zu verstehen, wie Farben und Größen im Browser funktionieren.

❌ Vermeide: „Gib mir ein Farbschema in HEX.“ ✅ Fragen, die denken erzwingen:

„Warum erbt ein <p>-Element die Schriftfarbe vom <body> – aber nicht den Hintergrund?“
„Erkläre mir den Unterschied zwischen px, em und rem – und warum px für Schriftgrößen problematisch ist.“
„Warum ist #FF0000 rot – und wie entsteht diese Zahl aus RGB?“

💡 Merke: Wenn die KI dir Farbcodes oder CSS gibt, hast du die falsche Frage gestellt. Ziel ist Verständnis – nicht die fertige Lösung.

🔍 Aufgabe 1: Analysiere – nicht korrigiere!

Ein Schüler hat folgendes CSS geschrieben:

body {
  color: #FF0000;
  font-size: 16px;
}

h1 {
  color: inherit;
  font-size: 24px;
}

p {
  font-size: 1.5em;
}

Schreibe (auf Papier oder in Textdatei):

Welche Farbe hat der Text im <h1>? Begründe mit dem Begriff „Vererbung“.
Wie groß ist die Schrift im <p>-Element? Rechne Schritt für Schritt nach (16px × 1.5 = ?).
Warum ist es besser, font-size: 1rem; statt 16px; zu schreiben?
Was passiert, wenn ein Nutzer im Browser die Schrift vergrößert – und warum ist das bei px ein Problem?

⚠️ Hinweis: Wer nur die Werte hinschreibt, hat die Aufgabe nicht verstanden. Es geht um Begründung, nicht um Rechnen!

🎨 Aufgabe 2: Gestalte mit Absicht – erst nach der Analyse!

Erstelle eine HTML-Datei farbtest.html und eine CSS-Datei css/farben.css mit folgenden Anforderungen:

Im <body>: Schriftfarbe in HEX, Schriftgröße in rem
<h1>: Farbe durch inherit übernehmen, Größe in rem
<p>: Größe in em (relativ zum Elternelement), eigene Farbe in RGB
Verlinke die CSS-Datei korrekt im <head>

💡 Teste selbst:
- Öffne mit VS Code Live Server
- Ändere die Schriftgröße im Browser (Strg + / Strg -): Bleibt alles lesbar?
- Prüfe im Entwickler-Tools (F12), welche Werte tatsächlich gelten

📊 Beurteilungskriterien – Übung 04: Farben & Vererbung

Deine Lösung wird im Fachgespräch bewertet – besonders dein eigenes Verständnis.

Kriterium	✅	➖	❌
Vererbung von Farben: Kannst du im Gespräch erklären, warum `color` vererbt wird, `background-color` aber nicht – und was `inherit` bewirkt?
Maßeinheiten verstehen: Weißt du, warum `rem` und `em` besser sind als `px` – und wie sie sich bei Browser-Zoom verhalten?
Farbformate: Kannst du erklären, wie HEX aus RGB entsteht – und warum es drei gängige Farbformate gibt?
Eigene Reflexion statt KI-Output: Kannst du deine Lösung ohne Code-Datei im Fachgespräch erklären – oder musst du erst nachschauen, was du „gemacht“ hast?

⚠️ Wichtig: Im Fachgespräch wirst du gefragt: „Warum verwendest du em für Absätze?“ Wer nur KI-Code abgibt, kann diese Fragen nicht beantworten.