Wiederholungs-Challenge #1

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

Aufgabe

Einfach

In dieser ersten Wiederholungs-Challenge wendest du dein Wissen über CSS-Eigenschaften zur Textgestaltung an, um ein bestimmtes Design nachzubauen. Diese Challenge testet deine Fähigkeit, verschiedene Texteigenschaften wie color, font-family, font-size, font-weight, text-align und text-decoration zu kombinieren.

Du erhältst ein HTML-Dokument mit verschiedenen Elementen. Deine Aufgabe ist es, verschiedene Eigenschaften anzuwenden, die du in diesem Abschnitt gelernt hast, um diese Elemente zu gestalten. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel, die alle <h1>-Elemente anspricht.
- Setze die Farbe auf dark blue.
- Setze die Schriftgröße auf 32px.
- Setze das Schriftgewicht auf bold.
- Setze die Textausrichtung auf center.
Schreibe eine CSS-Regel, die alle Elemente mit der Klasse intro-text anspricht.
- Setze die Farbe auf gray.
- Setze die font-family auf Arial, Helvetica, sans-serif;
- Setze die Schriftgröße auf 18px.
Schreibe eine CSS-Regel, die alle <li>-Elemente anspricht.
- Setze das font-weight auf 600.
Schreibe eine CSS-Regel, die alle <a>-Elemente anspricht.
- Setze die text-decoration auf none.
- Setze die Schriftart auf die bevorzugte font-family "Times New Roman", Times, serif.

Probier es selbst

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