CSS Übungen: 15 Aufgaben mit Prüfung – Ziel, Ergebnis, Hinweis, Lösung

Box-Modell

1. Zwei Absätze, ein Abstand (Collapsing Margins)Übung 1
2. Eine Box exakt 300 Pixel breit machenÜbung 4

Layout

1. Einen Block horizontal zentrierenÜbung 2
2. Drei Schaltflächen mit gleichem AbstandÜbung 12
3. Kopf, Leiste und Inhalt mit Grid anordnenÜbung 13

Kaskade

1. Welche Regel gewinnt? Spezifität im DuellÜbung 3

Vererbung

1. Links sollen die Textfarbe erbenÜbung 5

Selektoren

1. Nur den ersten Listenpunkt hervorhebenÜbung 6
2. Jede zweite Tabellenzeile einfärbenÜbung 9

Fluss

1. Ein Bild vom Text umfließen lassenÜbung 7

Positionierung

1. Eine Marke in die Ecke einer Karte setzenÜbung 8

Einheiten

1. Verschachtelte Listen ohne wachsende SchriftÜbung 10

Sichtbarkeit

1. Ein Element ohne Lücke versteckenÜbung 11

Variablen

1. Eine Farbe als Variable an drei Stellen verwendenÜbung 14

Medien

1. Die Navigation beim Drucken ausblendenÜbung 15

So funktionieren die Übungen

Links steht das gegebene HTML und das Basis-CSS, rechts das Feld für den eigenen Code. „Prüfen“ rendert den Code in einem eigenen Rahmen und vergleicht berechnete Werte und Maße mit dem Ziel – Farbe, Breite, Abstand, Position. Die Liste darunter zeigt jede Prüfung einzeln. Ohne JavaScript bleiben Aufgabe, Ziel, Hinweise und Lösung lesbar; nur die Prüfung entfällt.

Was der Prüfer misst – und was nicht

Geprüft wird das Ergebnis, nicht der Weg. Der eingegebene Code wird in einem eigenen Rahmen dargestellt, und aus diesem Rahmen liest der Prüfer die berechneten Werte und die tatsächlichen Maße der Elemente aus: die Farbe eines Textes, die Breite einer Box, den Abstand zwischen zwei Kanten, die Lage eines Elements gegenüber seinem Container. Verglichen wird dann mit dem Zielwert, bei Maßen mit einer kleinen Toleranz, weil Browser Bruchteile eines Pixels unterschiedlich runden.

Daraus folgt, dass es fast nie nur eine gültige Lösung gibt. Wer eine Box mit zwei automatischen Außenabständen zentriert, besteht ebenso wie jemand, der denselben Effekt anders erreicht – solange das Ergebnis übereinstimmt. Umgekehrt genügt es nicht, die richtige Eigenschaft zu nennen: Steht sie an der falschen Stelle oder wird sie von einer anderen Regel geschlagen, misst der Prüfer den unveränderten Wert und meldet die Prüfung als nicht bestanden.

Nicht geprüft wird alles, was sich am Ergebnis nicht ablesen lässt: Einrückung, Reihenfolge der Deklarationen, Kommentare, die Wahl zwischen Kurzform und Einzeleigenschaften. Auch der Quelltext selbst wird nicht durchsucht – es gibt keine verbotenen Wörter und keine erwartete Schreibweise.

Hinweise und Lösung

Jede Aufgabe hat ein bis drei Hinweise, die sich einzeln aufklappen lassen, und darunter die Lösung. Die Reihenfolge ist Absicht: Der erste Hinweis benennt in der Regel den Denkfehler, der zu der Aufgabe geführt hat, der zweite die Eigenschaft, die weiterhilft, und erst die Lösung zeigt den Code. Wer sofort zur Lösung springt, verliert den Teil, der beim nächsten Mal trägt – nämlich die Frage, warum der naheliegende Versuch nicht funktioniert.

Zu jeder Lösung gehört eine kurze Erklärung und ein Verweis auf die Referenzseite oder das Tutorial, in dem dieselbe Sache ausführlich steht. Aufgabe, Ziel, Hinweise und Lösung sind vollständig im Dokument enthalten und bleiben ohne JavaScript lesbar; nur die automatische Prüfung entfällt dann, und das Ergebnis lässt sich mit der Lösung von Hand vergleichen.

Wenn eine Aufgabe nicht aufgeht

Bleibt eine Prüfung rot, obwohl das Ergebnis richtig aussieht, lohnt der Blick auf die Liste der Einzelprüfungen: Dort steht, welcher Wert erwartet wurde und welcher gemessen wurde. In den meisten Fällen ist die Abweichung eine andere als vermutet – nicht die Farbe stimmt nicht, sondern die Breite, weil ein Innenabstand mitzählt.

Der zweite typische Grund ist eine Regel, die zwar richtig geschrieben ist, aber von einer Regel im Basis-CSS geschlagen wird. Das Basis-CSS steht sichtbar daneben und ist Teil der Aufgabe; es zu lesen, bevor man schreibt, erspart die halbe Fehlersuche.

In welcher Reihenfolge

Die Nummerierung folgt einem Aufbau: Die ersten Aufgaben betreffen das Box-Modell und die Abstände, dann kommen Kaskade und Spezifität, danach Vererbung und Schriftgrößen, zuletzt Fluss, Positionierung und die späteren Layout-Module. Wer der Reihe nach vorgeht, trifft jeden Begriff erst, nachdem der vorherige geklärt ist.

Nötig ist das nicht. Jede Aufgabe steht für sich, bringt ihr eigenes HTML und ihr eigenes Basis-CSS mit und setzt keine andere voraus. Wer ein bestimmtes Thema übt, greift sich die passenden Aufgaben heraus – die Gliederung oben ist nach Themen sortiert, nicht nach Nummern. Welche Aufgaben gelöst sind, merkt sich der Browser, in dem sie gelöst wurden; übertragen wird nichts, und ein anderes Gerät beginnt bei null.