Nozioni di base sulla tipografia

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 30 di 76.

Sfida

Facile

In questo progetto, applicherai le competenze CSS che hai già acquisito per creare e personalizzare un menu di un caffè. Ti eserciterai a formattare il testo con caratteri, dimensioni e allineamenti diversi. Migliorerai anche il design applicando colori di sfondo e del testo per creare un menu visivamente accattivante.

In questo progetto, usiamo un file CSS esterno per formattare il documento HTML; puoi vedere due file: il file HTML e il file CSS collegato, che è già stato associato per te.

In questa attività, applicherai degli stili per modificare la famiglia di caratteri e l'allineamento del testo.

Segui i passaggi qui sotto:

Applica la famiglia di caratteri Tahoma, Geneva, sans-serif all'intera pagina selezionando l'elemento <body>.
Imposta text-align: center; per l'elemento <h1> per centrare il titolo.
Imposta text-align: center; per l'elemento <p> con la classe welcome per centrare il testo introduttivo.

Provalo tu

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