Wiederholungsaufgabe Nr. 2

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

Aufgabe

Einfach

In dieser zweiten Wiederholungsaufgabe wendest du dein Wissen über Textformatierungseigenschaften in CSS an, um ein bestimmtes Design nachzubilden. Diese Aufgabe testet deine Fähigkeit, verschiedene Texteigenschaften wie color, font-family, font-size, font-weight, text-align und text-decoration zu kombinieren, um ein vorgegebenes Design nachzubilden.

Du erhältst ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>), einem Link (<a>) und einer ungeordneten Liste (<ul>) mit Listenelementen (<li>). Deine Aufgabe besteht darin, die gelernten Textformatierungseigenschaften zu verwenden, um diese Elemente so zu formatieren, dass sie dem unten abgebildeten Design entsprechen:

Befolge die folgenden Schritte:

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