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>