أساسيات تنسيق الخطوط

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

التحدي

سهل

في هذا المشروع، ستطبّق مهارات CSS التي تعلّمتها بالفعل لإنشاء قائمة مقهى وتنسيقها. ستتدرّب على تنسيق النص باستخدام خطوط وأحجام ومحاذاة مختلفة. وستحسّن التصميم أيضًا من خلال تطبيق ألوان الخلفية والنص لإنشاء قائمة جذابة بصريًا.

في هذا المشروع، نستخدم ملف CSS خارجيًا لتنسيق مستند HTML؛ ويمكنك رؤية ملفين: ملف HTML وملف CSS المرتبط به، والذي تم ربطه مسبقًا من أجلك.

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

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

طبّق Tahoma, Geneva, sans-serif لعائلة الخط على الصفحة بأكملها من خلال استهداف العنصر <body>.
عيّن text-align: center; للعنصر <h1> لمحاذاة العنوان في الوسط.
عيّن text-align: center; للعنصر <p> ذي الفئة welcome لمحاذاة النص التمهيدي في الوسط.

جرّب بنفسك

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