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

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

التحدي

سهل

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

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

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

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

قم بتطبيق font-family 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>