03 – CSS-Grundlagen 🎨

Gestalte mit Absicht – nicht mit Copy-Paste

🎯 1. Einleitung & W3Schools

In Kapitel 03 hast du gelernt, wie CSS aufgebaut ist, welche Maßeinheiten es gibt und warum externe CSS-Dateien wichtig sind.

Vertiefe dein Verständnis auf W3Schools – lies, probiere, denke:

🔗 W3Schools – CSS Syntax
🔗 W3Schools – CSS Units

🧠 2. KI-Prompt-Training – verstehe die Regeln

Deine Aufgabe: Formuliere einen Prompt, der kein CSS liefert, sondern dir hilft, zu verstehen, wie Selektoren, Eigenschaften und Werte zusammenwirken.

❌ Vermeide: „Gib mir CSS für eine Überschrift.“ ✅ Fragen, die denken erzwingen:

„Warum ist px für Schriftgrößen problematisch – und welche Einheit ist besser?“
„Erkläre mir den Unterschied zwischen em und rem – und wann ich welche verwende.“
„Warum sollte man externe CSS-Dateien nutzen – und was passiert, wenn man Inline-CSS verwendet?“

💡 Merke: Wenn die KI dir Code gibt, hast du die falsche Frage gestellt. Ziel ist Verständnis – nicht die fertige Lösung.

🔍 Aufgabe 1: Analysiere – nicht repariere!

Ein Schüler hat folgendes CSS geschrieben – aber es funktioniert nicht wie erwartet:

<style>
h1 { color = red; font-size: 24 }
p { background-color: #yellow; margin = 20px }
</style>

Schreibe (auf Papier oder in Textdatei):

Finde drei Syntaxfehler im CSS-Code.
Erkläre, warum jeder Fehler den Stil kaputt macht (z. B. „Gleichheitszeichen statt Doppelpunkt“).
Warum ist die Farbangabe #yellow falsch – und welche drei korrekten Formate gibt es stattdessen?

⚠️ Hinweis: Wer den Code einfach „korrigiert“, hat die Aufgabe nicht verstanden. Es geht um Begründung, nicht um Umsetzung!

🎨 Aufgabe 2: Gestalte bewusst – erst nach der Analyse!

Erstelle nun zwei Dateien in einem Ordner mein-stil:

index.html – mit einem <h1>, einem <p> und einem Link
css/style.css – externe CSS-Datei mit folgenden Regeln:

CSS-Anforderungen:

h1: Farbe in HEX, Schriftgröße in rem
p: Hintergrundfarbe, Padding, Zeilenabstand
Link: Kein Unterstrich, Farbe in RGB
Im <head> muss <link rel="stylesheet" href="css/style.css"> stehen

💡 Teste selbst:
- Öffne index.html mit VS Code Live Server
- Prüfe: Wird das CSS geladen? Ist der Link ohne Unterstrich?
- Nutze den Browser-Entwickler (F12), um die Regeln zu inspizieren

📊 Beurteilungskriterien – Übung 03: CSS-Grundlagen

Deine Lösung wird im Fachgespräch bewertet – besonders dein eigenes Verständnis.

Kriterium	✅	➖	❌
CSS-Syntax: Kannst du im Gespräch erklären, warum Doppelpunkt, Semikolon und geschweifte Klammern Pflicht sind – und was passiert, wenn sie fehlen?
Maßeinheiten & Farben: Weißt du, warum `rem` besser ist als `px` für Schriftgrößen – und welche drei korrekten Farbformate es gibt?
Externe CSS-Datei: Kannst du begründen, warum externe CSS-Dateien professioneller sind – und wie der Pfad im `<link>`-Tag korrekt geschrieben wird?
Eigene Reflexion statt KI-Output: Kannst du deine Lösung ohne Code-Datei im Fachgespräch erklären – oder musst du erst nachschauen, was du „gemacht“ hast?

⚠️ Wichtig: Im Fachgespräch wirst du gefragt: „Warum hast du rem statt px verwendet?“ Wer nur KI-Code abgibt, kann diese Fragen nicht beantworten.