Wiederholungs-Challenge #2

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 24 von 76.

Aufgabe

Einfach

In dieser zweiten Wiederholungs-Challenge wirst du dein Wissen über Text-Styling-Eigenschaften in CSS anwenden, um ein bestimmtes Design nachzubauen. Diese Challenge wird deine Fähigkeit testen, verschiedene Texteigenschaften wie color, font-family, font-size, font-weight, text-align und text-decoration zu kombinieren, um einem vorgegebenen Design zu entsprechen.

Dir wird ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>), einem Link (<a>) und einer ungeordneten Liste (<ul>) mit Listenelementen (<li>) zur Verfügung gestellt. Deine Aufgabe ist es, die gelernten Text-Styling-Eigenschaften zu verwenden, um diese Elemente so zu gestalten, dass sie dem unten gezeigten Design entsprechen:

Folge den unten stehenden Schritten:

Schreibe eine CSS-Regel, die das <h1>-Element anspricht. Setze die color auf black, die font-family auf "Times New Roman", Times, serif, die font-size auf 48px, das font-weight auf bold und das text-align auf center.
Schreibe eine CSS-Regel, die das <p>-Element anspricht. Setze die color auf gray, die font-family auf Arial, Helvetica, sans-serif, die font-size auf 18px und das text-align auf center.
Schreibe eine CSS-Regel, die das <a>-Element anspricht. Setze die color auf red, die text-decoration auf none.
Schreibe eine CSS-Regel, die alle <li>-Elemente anspricht. Setze die color auf green, die font-family auf "Courier New", Courier, monospace, die font-size auf 25px und das font-weight auf 600.

Probier es selbst

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