Color and Backgrounds

Part of the Styling with CSS section of Coddy's HTML journey — lesson 32 of 76.

Challenge

Easy

In this task, you will customize the background colors of different sections of the café menu. Use your creativity to choose colors that make the menu visually appealing!

Follow the steps below:

Apply a background color to the entire page (body). Choose any color that fits a café theme.
Apply a background color and text color to the footer (footer) that complement the overall design of the page.
Feel free to change the color of any other elements to enhance the styles.

Try it yourself

<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>