CSS Farben und Einheiten
CSS Farben und Einheiten
Hex, RGB, HSL, benannte Farben sowie px, rem, em, Prozent, vw und vh. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.
Lernziele
- Farbangaben unterscheiden
- passende CSS-Einheiten auswählen
- responsive Größen vermeiden, die unkontrolliert wachsen
Erklärung
Farben können als Hex, RGB, HSL oder benannte Farben geschrieben werden. Für Systeme ist HSL oft gut lesbar, weil Farbton, Sättigung und Helligkeit getrennt sind.
px ist absolut und gut für feine Linien. rem orientiert sich an der Root-Schriftgröße und eignet sich für Abstände und Schriftgrößen. %, vw und vh sind relativ zum Container oder Viewport.
Beispiele
:root {
--color-primary: hsl(212 90% 42%);
--space-4: 1rem;
}
.card {
padding: var(--space-4);
border-color: #d1d5db;
}
Variablen machen Farb- und Abstandssysteme konsistent.
.hero {
min-height: 60vh;
width: min(100%, 72rem);
}
vh bezieht sich auf die Viewport-Höhe, rem begrenzt die maximale Breite lesbar.
Typische Fehler
- Alles in Pixeln festlegen.
vwfür Fließtext verwenden und dadurch schlecht lesbare Schrift erzeugen.- Zu viele ähnliche Farbtöne ohne System anlegen.
Best Practices
- Nutze
remfür Schrift und Abstände. - Dokumentiere zentrale Farben als CSS-Variablen.
- Teste Kontraste in Light und Dark Mode.
Kleine Übung
Lege ein kleines Farbsystem mit Primärfarbe, Textfarbe, Hintergrund und zwei Abständen als CSS-Variablen an.
Zusammenfassung
CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.
Weiterführende Seiten
Zuletzt aktualisiert: 7. Juni 2026