Menu
Coddy logo textTech

אתגר סיכום #1

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

challenge icon

אתגר

קל

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

ניתן לכם מסמך HTML עם מגוון רכיבים. המשימה שלכם היא להחיל על הרכיבים האלה מאפיינים שונים שלמדתם ביחידה הזאת כדי לעצב אותם. בצעו את השלבים הבאים:

  1. כתבו כלל CSS שמכוון לכל רכיבי <h1>.
    • הגדירו את הצבע לכחול כהה.
    • הגדירו את גודל הגופן ל-32px.
    • הגדירו את משקל הגופן ל-bold.
    • הגדירו את יישור הטקסט למרכז.
  2. כתבו כלל CSS שמכוון לכל הרכיבים עם המחלקה intro-text.
    • הגדירו את הצבע לאפור.
    • הגדירו את font-family ל-Arial, Helvetica, sans-serif;
    • הגדירו את גודל הגופן ל-18px.
  3. כתבו כלל CSS שמכוון לכל רכיבי <li>.
    • הגדירו את font-weight ל-600.
  4. כתבו כלל CSS שמכוון לכל רכיבי <a>.
    • הגדירו את text-decoration ל-none.
    • הגדירו את הגופן ל-font-family המועדף עליכם:  "Times New Roman", Times, serif.

נסו בעצמכם

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Discovering the Ocean</h1>
    <p class="intro-text">The ocean covers 70% of the Earth's surface and is full of life. It also helps regulate the planet's climate.</p>
    <h2>Marine Life</h2>
    <ul>
        <li>Whales</li>
        <li>Octopuses</li>
        <li>Coral Reefs</li>
    </ul>
    <p>Learn more at <a href="https://www.oceans.org" target="_blank">The Ocean Conservation Society</a>.</p>
</body>
</html>

כל השיעורים ביחידה עיצוב באמצעות CSS

תרגלו בעצמכם: Web אונליין