Lädt...

CSS-Farben

Sie können Elemente treffen. Jetzt färben. Die erste Farbfertigkeit ist einfach: setzen Sie die Textfarbe mit der Eigenschaft color. Hintergründe, Verläufe und volle Farbmathematik kommen später — heute lesbare, wiederverwendbare Vordergrundfarbe.

Was macht color?

Die Eigenschaft color setzt die Vordergrundfarbe — vor allem die Farbe des Textes. Browser nutzen diese berechnete Farbe auch für Dinge, die currentColor folgen (Rahmen, manche SVGs, Dekorationen). Sie füllt nicht die Box hinter dem Text; das ist background-color (spätere Module).

Benannte Farben auf einen Blick

CSS bringt viele benannte Farben mit — Schlüsselwörter wie teal und navy. Merken Sie sich zuerst eine kleine Alltagsliste. Genaues Hex und rgb() kommen in der Lektion Farbwerte.

📊 Alltägliche benannte Farben

Name Wirkung Typische Nutzung
black / white Maximaler Kontrast Fließtext oder Seitenfläche (mit Bedacht)
navy / teal Ruhige Markenakzente Links, Überschriften, Hinweise
maroon / crimson Starke Warnung oder Betonung Fehler, Sale-Labels (sparsam)
gray / silver Ruhiger Sekundärtext Bildunterschriften, gedämpfte Labels
transparent Völlig durchsichtig Rahmen verstecken ohne die Eigenschaft zu entfernen

Textfarbe mit einem Namen setzen

Schreiben Sie eine normale Deklaration: Eigenschaft color, Wert eine benannte Farbe. Beginnen Sie mit Absatztext, damit die Seite Absicht zeigt.

Benannte Farbe auf Absatztext

css
CSS Code 
p {
color: teal;
}

Ergebnis lesen

Jeder passende <p> zeichnet seine Buchstaben in teal. Der Eigenschaftsname ist immer color — nicht text-color oder font-color.

Überschriften dürfen vom Fließtext abweichen

Oft wollen Sie einen dunkleren Titel und einen ruhigeren Absatz. Getrennte Selektoren, getrennte Farben.

Überschriftakzent vs. Fließtext

css
CSS Code 
h1 {
color: navy;
}

.lead {
color: gray;
}

Designgewohnheit

Kontrastreiche Überschriften erleichtern das Scannen. Weicher Sekundärtext hält Bildunterschriften leise. Trotzdem genug Kontrast für Lesbarkeit lassen.

Farbe wird vererbt

Kinder übernehmen die color des Elternteils, sofern sie keine eigene setzen. Deshalb kann Farbe auf einem Container einen ganzen Textblock thematisieren.

Vererbte Farbe auf einem Hinweisblock

css
CSS Code 
.note {
color: maroon;
}

Was wird vererbt?

In <div class="note">…</div> bleiben Absätze und Spans maroon, bis eine stärkere Regel sie ändert. Vererbung ist ein Feature — kein Bug.

currentColor folgt dem Text

currentColor heißt „nimm die berechnete color des Elements.“ Praktisch, wenn Rahmen oder Icon mit dem Text mithalten sollen.

Rahmen folgt Text über currentColor

css
CSS Code 
.badge {
color: teal;
border: 2px solid currentColor;
padding: 0.25rem 0.5rem;
}

Warum der Aufwand?

color einmal ändern — der Rahmen folgt. Kein zweites fest verdrahtetes Teal zum Synchronhalten.

Thematisierte Karte (Zusammenführung)

Kombinieren Sie Containerfarbe, ruhigeres Kind-Override und currentColor-Akzent.

Kartenthema mit Override + currentColor

css
CSS Code 
.card {
color: navy;
border: 1px solid currentColor;
padding: 1rem;
}

.card .muted {
color: gray;
}

color ist nicht der Hintergrund

Anfänger tippen oft color, wenn sie die Füllung hinter dem Text meinen. Von Tag eins trennen:

  • color → Text (Vordergrund)
  • background-color → die bemalte Box hinter dem Inhalt (bald)

Selbst ausprobieren

  1. Seite mit Überschrift, <p class="lead"> und <div class="note"> mit kurzem Absatz.
  2. Setzen Sie h1 { color: navy; }, p { color: teal; } und .note { color: maroon; } — prüfen Sie jede Zone.
  3. Fügen Sie .badge { color: teal; border: 2px solid currentColor; } auf einem kleinen Span hinzu — Rahmen soll dem Text entsprechen.
  4. In .card navy auf die Karte und color: gray auf .muted — Kind-Override gewinnt für diese Zeile.
  5. Optional: color: transparent auf einem Deko-Label — Text verschwindet, Layoutplatz bleibt.

Häufige Fehler

  • Mit color die Box-Hintergrundfarbe setzen — später background-color
  • Namen erfinden (lightishblue) — echte CSS-Keywords oder auf Hex/rgb warten
  • Erwarten, dass jede Eigenschaft wie color vererbt — viele tun das nicht
  • Sofort zu langen Hex-Strings springen, bevor benannte Farben sitzen
  • Kontrast ignorieren (blassgrau auf weiß) — hübsch, aber unlesbar

Kurz

  • color setzt die Vordergrund-Textfarbe
  • Benannte Farben (teal, navy, maroon, …) reichen für den Einstieg
  • Kinder erben color, bis sie überschreiben
  • currentColor nutzt die berechnete Textfarbe für Rahmen und Ähnliches
  • Tiefe Formate (Hex, rgb, hsl) für Farbwerte; Hintergründe für spätere Lektionen
  • Üben mit Überschrift / lead / note, bis die Eigenschaft automatisch sitzt

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial