Fundamentos de tipografía

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

Desafío

Fácil

En este proyecto, aplicarás las habilidades de CSS que ya has aprendido para crear y dar estilo a un café menu. Practicarás dando estilo al texto con diferentes fuentes, tamaños y alineaciones. También mejorarás el diseño aplicando colores de fondo y de texto para crear un menú visualmente atractivo.

En este proyecto, utilizamos un archivo CSS externo para dar estilo al documento HTML; puedes ver dos archivos: el archivo HTML y el archivo CSS vinculado, que ya ha sido conectado por ti.

En esta tarea, aplicarás estilos para cambiar la familia de fuentes y la alineación del texto.

Sigue los pasos a continuación:

Aplica el font-family Tahoma, Geneva, sans-serif a toda la página apuntando al elemento <body>.
Establece el text-align: center; para el elemento <h1> para alinear al centro el título.
Establece el text-align: center; para el elemento <p> con la clase welcome para alinear al centro el texto de introducción.

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>