Wiederholungs-Challenge

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

Aufgabe

Einfach

In dieser Wiederholungsaufgabe verwendest du Breite, Höhe, Außenabstand, Innenabstand und Rahmen, um Informationsfelder für Bücher zu gestalten. Dabei werden deine Fähigkeiten getestet, Inhalte zu strukturieren, Abstände zu erzeugen und Rahmen für ein übersichtliches Layout anzuwenden.

Du erhältst ein HTML-Dokument mit drei div-Bereichen, die jeweils den Buchtitel, den Autor und eine kurze Beschreibung enthalten. Deine Aufgabe besteht darin, diese Felder mithilfe von Breite, Höhe, Außenabstand, Innenabstand und Rahmen zu gestalten.

Führe die folgenden Schritte aus:

Schreibe eine CSS-Regel mit einem Klassenselektor, die auf alle Elemente mit der Klasse "book" abzielt.
Setze die Breite jedes Buchfelds auf 350px und die Höhe auf 150px.
Füge jedem Buchfeld einen Innenabstand von 15px hinzu, um Platz um den Inhalt herum zu schaffen.
Lege für jedes Buchfeld einen durchgezogenen Rahmen mit einer Breite von 3px und der Farbe Schwarz fest.
Füge zwischen den Buchfeldern einen Außenabstand von 20px hinzu, um sie voneinander zu trennen.

Probier es selbst

<html>
<head>
    <title>Book collection</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="book">
        <h3>Harry Potter and the Sorcerer's Stone</h3>
        <p>Author: J.K. Rowling</p>
        <p>Description: A young wizard's journey to defeat a dark wizard.</p>
    </div>

    <div class="book">
        <h3>The Great Gatsby</h3>
        <p>Author: F. Scott Fitzgerald</p>
        <p>Description: A tragic story of wealth, love, and betrayal in the 1920s.</p>
    </div>

    <div class="book">
        <h3>1984</h3>
        <p>Author: George Orwell</p>
        <p>Description: A dystopian novel about totalitarianism and surveillance.</p>
    </div>
</body>
</html>