CSS-Grundlagen
In dieser Einheit lernen Sie, wie Sie mit CSS (Cascading Style Sheets) das Aussehen Ihrer HTML-Dokumente gestalten. Sie verstehen die CSS-Syntax mit Selektoren, Eigenschaften und Werten, lernen das Box-Model kennen und arbeiten mit Farben und Typografie. Am Ende der Einheit gestalten Sie einen historischen Brief mit CSS und nutzen dafür LLMs als Coding-Assistenten.
Lernziele
Nach Abschluss dieser Einheit können Sie:
- CSS-Syntax verstehen: Sie kennen die Grundstruktur einer CSS-Regel mit Selektor, Eigenschaft und Wert und können eigene Regeln schreiben.
- Selektoren anwenden: Sie können Element-, Klassen- und ID-Selektoren nutzen, kombinieren und verstehen die Kaskade sowie Spezifität.
- Das Box-Model erklären: Sie verstehen, wie Content, Padding, Border und Margin zusammenwirken und können Abstände gezielt setzen.
- Farben und Typografie einsetzen: Sie arbeiten mit verschiedenen Farbformaten (Hex, RGB, HSL) und gestalten Schriften mit CSS-Eigenschaften.
- Einen Brief gestalten: Sie können ein HTML-Dokument (z.B. einen historischen Brief) mit CSS visuell ansprechend formatieren.
- Agentic Coding (PE + CL): Sie formulieren Prompts, um CSS-Code mit einem LLM zu generieren, und können den erzeugten Code lesen und verstehen.
Überblick: Was erwartet Sie?
CSS verstehen
CSS trennt Inhalt (HTML) von Darstellung (Design). Sie lernen, wie CSS-Regeln aufgebaut sind und wie der Browser entscheidet, welche Regel gewinnt, wenn mehrere Regeln auf dasselbe Element zutreffen (Kaskade und Spezifität).
Das Box-Model
Jedes HTML-Element ist eine Box. Das Box-Model beschreibt, wie Content, Padding, Border und Margin den Platz bestimmen, den ein Element einnimmt. Dieses Konzept ist fundamental für jedes CSS-Layout.
Farben und Typografie
Sie lernen verschiedene Farbformate kennen (Hex, RGB, HSL, benannte Farben) und arbeiten mit typografischen Eigenschaften wie Schriftfamilie, Schriftgröße, Zeilenabstand und Textausrichtung.
Agentic Coding mit LLMs
Sie nutzen Large Language Models, um CSS-Styles zu generieren. Der Fokus liegt auf Prompt Engineering (PE) — wie beschreibe ich ein gewünschtes Design präzise? — und Code Literacy (CL) — wie lese und verstehe ich den generierten CSS-Code?
Responsive Design Grundlagen
Ein erster Ausblick auf responsives Design: Was ist der Viewport, was sind Media Queries und relative Einheiten? Diese Konzepte werden in späteren Einheiten vertieft.