Farben und Hintergründe

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 32 von 76.

Aufgabe

Einfach

In dieser Aufgabe wirst du die Hintergrundfarben verschiedener Abschnitte des Café-Menüs anpassen. Nutze deine Kreativität, um Farben zu wählen, die das Menü optisch ansprechend gestalten!

Folge diesen Schritten:

Wende eine Hintergrundfarbe auf die gesamte Seite (body) an. Wähle eine beliebige Farbe, die zu einem Café-Thema passt.
Wende eine Hintergrundfarbe und eine Textfarbe auf die Fußzeile (footer) an, die das Gesamtdesign der Seite ergänzen.
Du kannst gerne die Farbe anderer Elemente ändern, um die Stile zu verbessern.

Probier es selbst

<html>
<head>
    <title>Café Menu</title>  
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Café Delight</h1>
        <p class="welcome">Welcome to our café! Enjoy a delicious meal.</p>
    </header>
    <div class="menu-category">
        <h2>Appetizers</h2>
        <ul>
            <li>
                <p class="dish-name">Bruschetta $5.99</p>
            </li>
            <li>
                <p class="dish-name">Garlic Bread $3.50</p>
            </li>
        </ul>
    </div>
    <div class="menu-category">
        <h2>Main Courses</h2>
        <ul>
            <li>
                <p class="dish-name">Spaghetti Carbonara $12.99</p>
            </li>
            <li>
                <p class="dish-name">Grilled Chicken Salad $9.99</p>
            </li>
        </ul>
    </div>
    <div class="menu-category">
        <h2>Desserts</h2>
        <ul>
            <li>
                <p class="dish-name">Chocolate Cake $4.99</p>
            </li>
            <li>
                <p class="dish-name">Cheesecake $5.49</p>
            </li>
        </ul>
    </div>
    <footer>
        <p>&copy; 2025 Café Delight - All rights reserved</p>
    </footer>
</body>
</html>