Menu
Coddy logo textTech

Wiederholungsaufgabe Nr. 1

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

challenge icon

Aufgabe

Einfach

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

Dir wird ein HTML-Dokument mit verschiedenen Elementen gegeben. Deine Aufgabe besteht darin, die verschiedenen Eigenschaften, die du in diesem Abschnitt kennengelernt hast, anzuwenden, um diese Elemente zu gestalten. Befolge die folgenden Schritte:

  1. Schreibe eine CSS-Regel, die alle <h1>-Elemente auswählt.
    • Setze die Farbe auf Dunkelblau.
    • Setze die Schriftgröße auf 32px.
    • Setze die Schriftstärke auf fett.
    • Richte den Text zentriert aus.
  2. Schreibe eine CSS-Regel, die alle Elemente mit der Klasse intro-text auswählt.
    • Setze die Farbe auf Grau.
    • Setze die font-family auf Arial, Helvetica, sans-serif;
    • Setze die Schriftgröße auf 18px.
  3. Schreibe eine CSS-Regel, die alle <li>-Elemente auswählt.
    • Setze die font-weight auf 600.
  4. Schreibe eine CSS-Regel, die alle <a>-Elemente auswählt.
    • Setze die text-decoration auf none.
    • Setze die Schrift auf deine bevorzugte font-family auf "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>

Alle Lektionen in Styling mit CSS

Übe selbstständig: Web-Playground