MINT lernen

CSS: Gestalten mit Regeln

Zehn Übungen zu Selektoren, Deklarationen und dem Box-Modell — bis zur Frage, warum eine Regel einfach nicht wirkt.

Dein Fortschritt:
0 / 0 Aufgaben
1

Übungsaufgaben

Zehn interaktive Übungen zum Klicken, Ziehen und Knobeln — von AFB I bis AFB III. Jede Übung gibt dir sofort Rückmeldung; wenn du nicht weiterkommst, helfen die gestuften Tipps.

A1
Selektor erkennen
AFB I

Ordne jeden Selektor seiner Art zu.

Ziehe jede Karte in den passenden Korb — oder wähle sie mit Enter aus und drücke dann die Ziffer des Korbs (0 legt sie zurück).
1Element-Selektor
2Klassen-Selektor
3ID-Selektor
Ohne Zeichen: Elementname. Punkt: Klasse (class="…"). Raute: ID (id="…").
Ansatz: Achte auf das erste Zeichen.
Weiter: Punkt = class, Raute = id.
A2
Stimmt's? — Regeln
AFB I

Fünf Aussagen über CSS-Regeln. Gib an, ob sie stimmen.

5 Aussagen nacheinander. Eine falsche Einschätzung reicht — dann startest du die Serie mit „Neue Runde“ neu.
Aussage 1 von 5

Aufbau einer Regel: selektor { eigenschaft: wert; }
Ansatz: Denke an das Box-Modell von innen nach außen.
Weiter: id ist einmalig, class mehrfach verwendbar.
A3
Welche Elemente werden rot?
AFB I

CSS: .neu { color: red; }

<h2 class="neu">Kurse</h2>
<p>Schach</p>
<p class="neu">Robotik</p>
<p class="alt">Theater</p>
<li class="neu">Chor</li>

Bestimme, wie viele Elemente rot dargestellt werden.

Rechne selbst und trage das Ergebnis ein — Enter prüft direkt.
Die Regel trifft jedes Element mit class="neu" — egal welcher Tag: h2, p und li, also 3.
Ansatz: Nur die Klasse zählt, nicht der Tag-Name.
Weiter: Zähle die Elemente mit class="neu".
A4
Regel vervollständigen
AFB II

Alle Elemente mit der Klasse hinweis sollen blaue Schrift und 12 px Innenabstand bekommen. Ergänze die Regel — zwei Wörter bleiben übrig.

Wort anklicken, dann Lücke anklicken (oder umgekehrt) — mit Tab und Enter geht es genauso. Ein Klick auf eine gefüllte Lücke legt das Wort zurück.

{ blue : 12px; }

#hinweis wäre eine ID, margin der Außenabstand.
Ansatz: Klassen werden mit Punkt geschrieben.
Weiter: Innenabstand = padding.
A5
Fehlersuche im Stylesheet
AFB II

Analysiere Ninas style.css — drei Zeilen sind falsch.

Klicke genau die fehlerhaften Zeilen an — die richtigen musst du stehen lassen.
Alle drei Fehler meldet der Browser nicht — die betroffenen Deklarationen werden einfach ignoriert.
Ansatz: Prüfe Doppelpunkt, Semikolon und Einheiten.
Weiter: Zahl und Einheit stehen direkt nebeneinander.
A6
Gesamtbreite berechnen
AFB II

.knopf { width: 120px; padding: 15px; border: 3px solid black; margin: 10px; }

Berechne Schritt für Schritt.

Löse die Kette Schritt für Schritt: Erst wenn ein Schritt stimmt, wird der nächste freigeschaltet. Enter prüft.
  1. Breite von Inhalt + Innenabstand: px
  2. Sichtbare Breite mit Rahmen: px
  3. Platzbedarf in der Zeile mit Außenabstand: px
120 + 2 · 15 = 150; 150 + 2 · 3 = 156; 156 + 2 · 10 = 176 px. Jeder Abstand zählt links und rechts.
Ansatz: padding, border und margin wirken auf beiden Seiten.
Weiter: Rechne von innen nach außen.
A7
Selektor und Treffer
AFB II Mix

Gegeben ist: <p id="intro" class="info">…</p> <p class="info">…</p> <div class="info">…</div>. Ordne jedem Selektor die Anzahl der getroffenen Elemente zu.

Klicke links einen Eintrag an und dann rechts den passenden — es entsteht eine Verbindungslinie. Mit der Tastatur: Enter zum Auswählen, ↑/↓ zum Wandern.
#info sucht eine ID „info“ — die gibt es nicht, „info“ ist nur eine Klasse. .info trifft beide Absätze und das div.
Ansatz: Zähle für jeden Selektor die passenden Elemente.
Weiter: Verwechsle Klasse und ID nicht.
A8
Welche Farbe gewinnt?
AFB III

Für <p class="hinweis">Text</p> gelten zwei Regeln:

p { color: black; }
.hinweis { color: green; }

Untersuche, welche Aussagen stimmen.

Mehrere Antworten sind richtig. Markiere alle zutreffenden und klicke dann auf „Prüfen“.
Treffen mehrere Regeln dasselbe Element, gewinnt die spezifischere (ID vor Klasse vor Element). Nur bei gleicher Spezifität entscheidet die Reihenfolge — die spätere gewinnt.
Ansatz: Welche Regel beschreibt das Element genauer?
Weiter: Die Reihenfolge entscheidet nur bei Gleichstand.
A9
Kasten reparieren
AFB III

Der Kasten soll 200 px Inhalt haben, 10 px Innenabstand, einen 2 px dicken grünen Rahmen und blauen Hintergrund. Überprüfe die Regel und korrigiere die fehlerhaften Zeilen.

Klicke die fehlerhaften Zeilen an — dann klappt ein Feld auf, in das du die richtige Zeile schreibst. Geprüft werden Auswahl und Korrekturen (Leerzeichen sind egal).
Ohne Einheit ist 200 ungültig und wird ignoriert. CSS schreibt amerikanisch: color, nicht colour.
Ansatz: Zahlen brauchen (außer bei 0) eine Einheit.
Weiter: Achte auf die Schreibweise der Eigenschaft.
A10
Zu breit für die Spalte
AFB III Trick

Eine Spalte ist 300 px breit. Darin steht .bild { width: 300px; padding: 10px; border: 5px solid; }. Ermittle, um wie viele Pixel der Kasten über die Spalte hinausragt.

Rechne selbst und trage das Ergebnis ein — Enter prüft direkt.
Sichtbare Breite: 300 + 2 · 10 + 2 · 5 = 330 px. Das sind 30 px zu viel — obwohl width genau 300 px ist. width meint nur den Inhalt.
Ansatz: Rechne die sichtbare Breite aus, nicht nur width.
Weiter: Vergleiche mit 300 px.