CSS-Selektoren

Schritt 1: Absätze

Absätze im Browser

Betrachten Sie noch mal die Seite aus Aufgabe 1. Stellen Sie sicher, dass Ihre bisherige Lösung korrekt ist und nur Absätze (<p>) als Elemente enthält.

Erweitern Sie Ihre HTML-Seite um eine Überschrift 1. Ordnung, z.B. mit dem Text "HTML-Dokumente mit CSS" (Abbildung).

Kontrolle der eigenen Lösung

Überprüfen Sie hier Ihre Lösung. Fangen Sie mit dem nächsten Schritt erst an, wenn Sie in diesem Schritt keine Fehler haben.

Schritt 2: Alle Absätze einfärben

Rote Absätze im Browser

Färben Sie alle Absätze mit roter Schrift ein. Benutzen Sie dafür nur eine Regel in CSS.

Kontrolle der eigenen Lösung

Überprüfen Sie hier Ihre Lösung. Fangen Sie mit dem nächsten Schritt erst an, wenn Sie in diesem Schritt keine Fehler haben.

Schritt 3: Einen Absatz einfärben

Ausgewählte Absätze mit Schriftfarbe

Färben Sie nur den letzten Absatz mit roter Schrift ein. Benutzen Sie dafür einen Id-Selektor.

Kontrolle der eigenen Lösung

Überprüfen Sie hier Ihre Lösung. Fangen Sie mit dem nächsten Schritt erst an, wenn Sie in diesem Schritt keine Fehler haben.

Schritt 4: Einige Absätze einfärben

Überschriften mit Schriftfarbe

Färben Sie die Überschrift und den letzten Absatz mit roter Schrift ein. Benutzen Sie dafür einen Klassenselektor.

Kontrolle der eigenen Lösung

Überprüfen Sie hier Ihre Lösung. Fangen Sie mit dem nächsten Schritt erst an, wenn Sie in diesem Schritt keine Fehler haben.

Schritt 5: Absätze und Überschriften einfärben

Ausgewählte Absätze und Überschriften mit Schriftfarbe

Färben Sie alle Absätze und alle Überschriften mit roter Schrift ein. Benutzen sie dafür nur eine Regel.

Kontrolle der eigenen Lösung

Überprüfen Sie hier Ihre Lösung. Fangen Sie mit dem nächsten Schritt erst an, wenn Sie in diesem Schritt keine Fehler haben.

Schritt 6: Einen Absatz und Überschriften einfärben

Hintergrundfarbe

Färben Sie alle Absätze und alle Überschriften mit roter Schrift ein und setzen die den Hintergrund der Seite auf blau. Sie können dafür z.B. den Farbnamen lightcyan benutzen. Benutzen Sie dafür maximal zwei Regeln in CSS.
Beachten Sie: der komplette Hintergrund wird eingefärbt, die Seite darf keine weißen Streifen haben.

Kontrolle der eigenen Lösung

Überprüfen Sie hier Ihre Lösung. Sie sind mit dieser Aufgabe erst fertig, wenn die Tests keine Fehler zeigen.