Menu
Coddy logo textTech

Metin Şekillendirme

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

challenge icon

Görev

Kolay

Bu görevde, sayfadaki farklı öğeler için yazı tipi boyutunu, rengini ve dekorasyonunu özelleştireceksiniz. 

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

  1. <h1> öğesinin yazı tipi boyutunu 36px olarak ayarlayın ve bir underline dekorasyonu uygulayın.
  2. welcome sınıfına sahip öğenin yazı tipi ağırlığını (font weight) 700 olarak ayarlayın.
  3. <h2> öğelerinin (kategori başlıkları) yazı tipi boyutunu 24px, yazı tipi rengini ise seçtiğiniz herhangi bir renge (siyah hariç) ayarlayın.
  4. dish-name sınıfına sahip öğelerin yazı tipi rengini seçtiğiniz herhangi bir yazı tipi rengine (siyah hariç) 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>

Styling with CSS bölümündeki tüm dersler