Bases de la typographie

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

Défi

Facile

Dans ce projet, vous appliquerez les compétences CSS que vous avez déjà apprises pour créer et styliser un café menu. Vous vous entraînerez à styliser le texte avec différentes polices, tailles et alignements. Vous améliorerez également le design en appliquant des couleurs d'arrière-plan et de texte pour créer un menu visuellement attrayant.

Dans ce projet, nous utilisons un fichier CSS externe pour styliser le document HTML ; vous pouvez voir deux fichiers : le fichier HTML et le fichier CSS lié, qui a déjà été connecté pour vous.

Dans cette tâche, vous appliquerez des styles pour modifier la famille de polices et l'alignement du texte.

Suivez les étapes ci-dessous :

Appliquez la font-family Tahoma, Geneva, sans-serif à l'ensemble de la page en ciblant l'élément <body>.
Définissez le text-align: center; pour l'élément <h1> afin de centrer le titre.
Définissez le 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>