Color y fondos

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 32 de 76.

Desafío

Fácil

En esta tarea, personalizarás los colores de fondo de diferentes secciones del menú del café. ¡Usa tu creatividad para elegir colores que hagan que el menú sea visualmente atractivo!

Sigue los pasos a continuación:

Aplica un color de fondo a toda la página (body). Elige cualquier color que se ajuste al tema de un café.
Aplica un color de fondo y un color de texto al pie de página (footer) que complementen el diseño general de la página.
Siéntete libre de cambiar el color de cualquier otro elemento para mejorar los estilos.

Pruébalo tú mismo

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