יסודות הטיפוגרפיה

חלק מהיחידה עיצוב באמצעות 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>