Tipografi Temelleri

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 30 / 76.

Görev

Kolay

Bu projede, bir kafe menüsü oluşturmak ve stilini belirlemek için halihazırda öğrendiğiniz CSS becerilerini uygulayacaksınız. Metni farklı yazı tipleri, boyutlar ve hizalamalarla stillendirme pratiği yapacaksınız. Ayrıca, görsel olarak çekici bir menü oluşturmak için arka plan ve metin renkleri uygulayarak tasarımı geliştireceksiniz.

Bu projede, HTML belgesini stillendirmek için harici bir CSS dosyası kullanıyoruz; iki dosya görebilirsiniz: HTML dosyası ve sizin için önceden bağlanmış olan bağlantılı CSS dosyası.

Bu görevde, yazı tipi ailesini ve metin hizalamasını değiştirmek için stiller uygulayacaksınız.

Aşağıdaki adımları izleyin:

<body> öğesini hedefleyerek tüm sayfaya Tahoma, Geneva, sans-serif font-family değerini uygulayın.
Başlığı merkeze hizalamak için <h1> öğesine text-align: center; özelliğini ayarlayın.
Giriş metnini merkeze hizalamak için welcome sınıfına sahip <p> öğesine text-align: center; özelliğini ayarlayın.

Kendin dene

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