Podstawy typografii

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 30 z 76.

Wyzwanie

Łatwy

W tym projekcie zastosujesz umiejętności związane z CSS, które już zdobyłeś, aby stworzyć i ostylować menu kawiarni. Poćwiczysz stylizowanie tekstu za pomocą różnych czcionek, rozmiarów i wyrównań. Uatrakcyjnisz też projekt, stosując kolory tła i tekstu, aby stworzyć menu, które będzie przyjemne dla oka.

W tym projekcie używamy zewnętrznego pliku CSS do stylizowania dokumentu HTML; zobaczysz dwa pliki: plik HTML i połączony z nim plik CSS, który został już dla Ciebie dołączony.

W tym zadaniu zastosujesz style, aby zmienić krój czcionki i wyrównanie tekstu.

Wykonaj poniższe kroki:

Zastosuj krój czcionki Tahoma, Geneva, sans-serif na całej stronie, wybierając element <body>.
Ustaw text-align: center; dla elementu <h1>, aby wyśrodkować tytuł.
Ustaw text-align: center; dla elementu <p> z klasą welcome, aby wyśrodkować tekst wprowadzający.

Spróbuj swoich sił

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