אתגר סיכום #2

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 24 מתוך 76.

אתגר

קל

באתגר הסיכום השני הזה, תיישמו את הידע שלכם במאפייני עיצוב טקסט ב-CSS כדי לשחזר עיצוב מסוים. האתגר הזה יבחן את היכולת שלכם לשלב מגוון מאפייני טקסט, כמו color, font-family, font-size, font-weight, text-align ו-text-decoration, כדי להתאים לעיצוב נתון.

ניתן לכם מסמך HTML עם כותרת (<h1>), פסקה (<p>), קישור (<a>) ורשימה לא מסודרת (<ul>) ובה פריטי רשימה (<li>). המשימה שלכם היא להשתמש במאפייני עיצוב הטקסט שלמדתם כדי לעצב את האלמנטים האלה כך שיתאימו לעיצוב שמוצג בתמונה שלמטה:

בצעו את השלבים הבאים:

כתבו כלל CSS שחל על האלמנט <h1>. הגדירו את color ל-black, את font-family ל-"Times New Roman", Times, serif, את font-size ל-48px, את font-weight ל-bold ואת text-align ל-center.
כתבו כלל CSS שחל על האלמנט <p>. הגדירו את color ל-gray, את font-family ל-Arial, Helvetica, sans-serif, את font-size ל-18px ואת text-align ל-center.
כתבו כלל CSS שחל על האלמנט <a>. הגדירו את color ל-red ואת text-decoration ל-none.
כתבו כלל CSS שחל על כל האלמנטים מסוג <li>. הגדירו את color ל-green, את font-family ל-"Courier New", Courier, monospace, את font-size ל-25px ואת font-weight ל-600.

נסו בעצמכם

<html>
<head>
    <title>Recap Challenge #2</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>