Tipografinin Temelleri

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 30 / 76.

Görev

Kolay

Bu projede, bir café menüsü oluşturmak ve biçimlendirmek için daha önce öğrendiğin CSS becerilerini uygulayacaksın. Metni farklı yazı tipleri, boyutlar ve hizalamalarla biçimlendirme pratiği yapacaksın. Ayrıca görsel olarak çekici bir menü oluşturmak için arka plan ve metin renkleri uygulayarak tasarımı geliştireceksin.

Bu projede HTML belgesini biçimlendirmek için harici bir CSS dosyası kullanıyoruz; iki dosya görebilirsin: HTML dosyası ve senin 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.

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

Tüm sayfaya Tahoma, Geneva, sans-serif yazı tipi ailesini uygulamak için <body> öğesini hedefle.
Başlığı ortalamak için <h1> öğesinde text-align: center; ayarla.
Giriş metnini ortalamak için welcome sınıfına sahip <p> öğesinde text-align: center; ayarla.

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>