Conceptos básicos de tipografía

Parte de la sección Estilos con 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 diseñar un menú de café. Practicarás cómo dar 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, usamos un archivo CSS externo para dar estilo al documento HTML; puedes ver dos archivos: el archivo HTML y el archivo CSS vinculado, que ya se ha conectado por ti.

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

Sigue los pasos a continuación:

Aplica la propiedad font-family: Tahoma, Geneva, sans-serif a toda la página seleccionando el elemento <body>.
Establece text-align: center; para el elemento <h1> para centrar el título.
Establece text-align: center; para el elemento <p> con la clase welcome para centrar el texto introductorio.

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>