04 – Farben & Vererbung 🎨

Verstehe, wie Farben definiert und weitergegeben werden

🌈 1. Farben deklarieren – drei Wege

In CSS kannst du Farben auf drei Arten angeben:

Farbnamen: tomato, blue (ca. 140 Standardnamen)
HEX: #e67e22 (6-stellig, basierend auf RGB)
RGB: rgb(230, 126, 34) (0–255 pro Kanal)

💡 Empfehlung: Nutze HEX – es ist kurz, präzise und überall unterstützt.

📚 Vertiefung auf W3Schools – CSS Farben

Alle Farbformate im Überblick – mit Farbwähler und Beispielen.

🔗 W3Schools: CSS Colors

🎨 2. Interaktive Farbmischung – RGB verstehen

Farben im Web basieren auf dem additiven RGB-System:

Rot + Grün = Gelb
Rot + Blau = Magenta
Grün + Blau = Cyan
Alle drei gleich = Grau/Weiß

Jeder Kanal (Rot, Grün, Blau) hat einen Wert zwischen 0 und 255. HEX ist dabei nur eine Kurzschreibweise für diese drei Zahlen.

Rot: 128

Grün: 128

Blau: 128

          RGB: rgb(128, 128, 128)

          HEX: #808080

💡 Tipp: Gleiche Werte = Graustufe! Höhere Werte = heller.

🧬 3. Farbvererbung – wie Farben weitergegeben werden

In CSS erben Kind-Elemente bestimmte Eigenschaften von ihren Eltern. Das ist ein zentrales Prinzip – besonders bei Schrift und Farbe.

Folgende Eigenschaften werden vererbt:

color (Schriftfarbe)
font-family
font-size (nur bei relativen Einheiten wie em, %)
text-align
line-height

Folgende Eigenschaften werden NICHT vererbt:

background-color
padding, margin, border
width, height

Beispiel:
body { color: #e67e22; }
→ Alle Texte auf der Seite sind orange – es sei denn, ein Element überschreibt die Farbe explizit.

🎨 4. Farbschemata – harmonische Kombinationen

Eine professionelle Website nutzt maximal **3 Farben**:

Primärfarbe: Dein Markenfarbton (z. B. unser Orange #E67E22)
Sekundärfarbe: Für Hintergründe oder neutrale Bereiche
Akzentfarbe: Für Buttons, Links oder Warnungen

⚠️ Vermeide zu viele Farben – das wirkt unruhig und unprofessionell!

📚 Vertiefung auf W3Schools – CSS Vererbung

Erfahre, welche CSS-Eigenschaften standardmäßig vererbt werden und warum das wichtig ist.

🔗 W3Schools: CSS Inherit

📏 5. Absolute und relative Maßeinheiten

In CSS gibst du Abstände, Schriftgrößen oder Breiten mit Maßeinheiten an. Es gibt zwei Arten: absolute (fest) und relative (flexibel).

✅ Absolute Einheiten – für feste Werte

Diese Einheiten haben eine feste Größe – unabhängig vom Kontext:

px (Pixel) – am häufigsten verwendet
mm, cm, in, pt – für Druckmedien

⚠️ Wichtig: Vermeide px für Schriftgrößen! Viele Browser erlauben es Benutzern nicht, px-Schriften zu vergrößern – das verletzt Barrierefreiheitsstandards.

🔄 Relative Einheiten – für flexible, zugängliche Layouts

Diese Einheiten passen sich an den Kontext an – ideal für barrierefreie und responsive Webseiten:

% – Prozent des Elternelements (z. B. width: 80%)
em – Relativ zur Schriftgröße des Elternelements
rem – Relativ zur Schriftgröße des <html>-Elements („root em“)

📐 Umrechnung & Vergleich

Standardmäßig hat das <html>-Element eine Schriftgröße von 16px. Daraus ergibt sich:

Einheit	Bedeutung	Äquivalent zu	Verwendung
`16px`	16 Pixel	—	Linienstärke, Icon-Größe
`1rem`	Root-EM	`16px`	Schriftgrößen, Abstände im ganzen Dokument
`1em`	Eltern-EM	`16px` (wenn Elternelement 16px hat)	Abstände innerhalb eines Blocks (z. B. Padding)
`100%`	Vollbreite des Elternelements	—	Container, Bilder
`1mm`	1 Millimeter	`3.78px`	Nur für Druck

💡 Praxis-Tipp:
Verwende rem für Schriftgrößen und % oder em für Abstände – so bleibt deine Seite flexibel und barrierefrei.

📚 Vertiefung auf W3Schools – CSS Maßeinheiten

Alle verfügbaren Einheiten im Überblick – mit Beispielen und Browser-Support.

🔗 W3Schools: CSS Units

🧠 6. KI als Lernpartner – guter Prompt

❌ Schlecht: „Mach mir eine schöne Website.“ ✅ Gut: „Kannst du mir ein harmonisches Farbschema für eine Künstlerseite vorschlagen – mit Primärfarbe, Sekundärfarbe und Akzentfarbe – und zeig mir, wie ich das in CSS mit rem für Schriftgrößen und % für Container umsetze?“