Bases de la typographie

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 30 sur 76.

Défi

Facile

Dans ce projet, tu appliqueras les compétences CSS que tu as déjà acquises pour créer et mettre en forme un menu de café. Tu t’exerceras à mettre en forme le texte avec différentes polices, tailles et alignements. Tu amélioreras également le design en appliquant des couleurs d’arrière-plan et de texte afin de créer un menu visuellement attrayant.

Dans ce projet, nous utilisons un fichier CSS externe pour mettre en forme le document HTML ; tu peux voir deux fichiers : le fichier HTML et le fichier CSS lié, qui a déjà été connecté pour toi.

Dans cette tâche, tu appliqueras des styles pour modifier la famille de polices et l’alignement du texte.

Suis les étapes ci-dessous :

Applique Tahoma, Geneva, sans-serif à l’ensemble de la page en ciblant l’élément <body>.
Définis text-align: center; pour l’élément <h1> afin de centrer le titre.
Définis text-align: center; pour l’élément <p> avec la classe welcome afin de centrer le texte d’introduction.

Essayez vous-même

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