CSS Einführung
CSS Einführung
Aufgabe von CSS, Trennung von Inhalt und Darstellung sowie Einbindungsarten. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.
Lernziele
- beschreiben, was CSS im Browser macht
- HTML-Inhalt und CSS-Darstellung trennen
- Inline, interne und externe Stylesheets unterscheiden
Erklärung
CSS steuert Darstellung: Farben, Schrift, Abstände, Layout, Animationen und responsive Verhalten. HTML liefert die Bedeutung, CSS entscheidet über die visuelle Präsentation.
Der Browser kombiniert HTML und CSS. Aus HTML entsteht das DOM, aus CSS das CSSOM. Zusammen berechnet der Browser, wie jedes Element dargestellt wird.
Beispiele
<link rel="stylesheet" href="styles.css">
Externe Stylesheets sind für Projekte am wartbarsten.
body {
font-family: system-ui, sans-serif;
color: #1f2937;
}
Diese Regel gestaltet den sichtbaren Text, ohne die HTML-Struktur zu verändern.
Typische Fehler
- Inline-Styles für ganze Projekte verwenden.
- CSS-Klassen nach Farbe statt nach Funktion benennen.
- Layout-Probleme durch zusätzliches HTML statt mit CSS lösen.
Best Practices
- Lege CSS möglichst in externe Dateien.
- Benutze wiederkehrende Werte für Farben und Abstände.
- Prüfe Änderungen in hellen und dunklen Farbschemata, wenn die Seite Dark Mode unterstützt.
Kleine Übung
Erstelle eine HTML-Seite und binde eine externe CSS-Datei ein. Gestalte nur Schrift, Hintergrund und Linkfarbe.
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