Die Farben des Cafés

Zeit für ein kleines Projekt! In diesem Checkpoint gestaltest du eine ganze Seite allein, mit dem, was du in den ersten drei Lektionen gelernt hast: Selektoren, Kaskade und Vererbung sowie Farben.

Die Übungen hier sind etwas anders als die bisherigen. Die Anweisungen sagen, wie die Seite aussehen soll, nicht, wie du das CSS schreibst. Es gibt viele richtige Wege: Du wählst die Selektoren, in welche Regeln die Deklarationen kommen und wie du jede Farbe schreibst. Nimm den Weg, der für dich Sinn ergibt. Wenn du nicht weiterkommst, sieh in der Lektion nach, in der du gelernt hast, was du brauchst.

Das Projekt. Das Café Samtpfote, ein kleines Café voller Katzen, hat seine Speisekarte auf seine Website gestellt, aber die Seite ist noch schlicht schwarz-weiß. In drei Übungen gibst du ihr die Farben des Cafés, kennzeichnest die veganen und ausverkauften Speisen und hebst die Preise und das Tagesangebot hervor. Jede Übung setzt dort an, wo die vorige aufgehört hat: Der Editor beginnt mit einem fertigen Stylesheet aus dem vorigen Schritt, das anders aussehen kann als deins. Das ist in Ordnung.

Die Schrift und die Abstände haben wir in style.css vorbereitet. Die Abstände verwenden die Eigenschaften margin und padding, die du in der Lektion CSS-Box-Modell kennenlernst.

Das Design. Die Designerin des Cafés hat diese Farben gewählt:

• #fdf6ec, Creme: der Hintergrund der Seite,
• #3b2a20, Dunkelbraun: der Text,
• #6f4e37, Kaffeebraun: der Hintergrund von Header und Footer, deren Text weiß ist,
• #b5651d, Karamell: die Überschriften der Speisekarte.

Die Aufgabe. Färbe die Seite ein. Wenn du fertig bist, sieht sie so aus (verkleinert):

Ein Tipp: Denk an die Vererbung aus der Lektion über Selektoren. Du brauchst nicht für jedes Element eine Regel, denn die Textfarbe wird vererbt. Links sind eine Ausnahme: Für sie hat der Browser eine eigene Regel.