تنسيق النصوص

جزء من قسم Styling with CSS في رحلة HTML على Coddy. الدرس 31 من 76.

التحدي

سهل

في هذه المهمة، ستقوم بتخصيص حجم الخط، ولونه، وزخرفته لعناصر مختلفة في الصفحة.

اتبع الخطوات أدناه:

قم بتعيين حجم الخط للعنصر <h1> إلى 36px، وقم بتطبيق زخرفة underline.
قم بتعيين وزن الخط للعنصر الذي يحمل الفئة welcome إلى 700.
قم بتعيين حجم الخط لعناصر <h2> (عناوين الفئات) إلى 24px، ولون الخط إلى أي لون من اختيارك (ليس الأسود).
قم بتعيين لون الخط للعناصر التي تحمل الفئة dish-name إلى أي لون خط من اختيارك (ليس الأسود).

جرّب بنفسك

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