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>