Estilo de texto

Parte de la sección Styling with CSS del Journey de HTML de Coddy. Lección 31 de 76.

Desafío

Fácil

En esta tarea, personalizarás el tamaño de fuente, el color y la decoración para diferentes elementos de la página.

Sigue los pasos a continuación:

Establece el tamaño de fuente del elemento <h1> a 36px, y aplica una decoración underline.
Establece el grosor de fuente (font weight) del elemento con la clase welcome a 700.
Establece el tamaño de fuente de los elementos <h2> (títulos de categoría) a 24px, y el color de fuente a cualquier color de tu elección (que no sea negro).
Establece el color de fuente de los elementos con la clase dish-name a cualquier color de fuente de tu elección (que no sea negro).

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>