Wiederholungs-Challenge

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

Aufgabe

Einfach

In dieser Wiederholungs-Challenge wirst du width, height, margin, padding und borders verwenden, um Buchinformationsboxen zu gestalten. Dies wird deine Fähigkeit testen, Inhalte zu strukturieren, Abstände zu schaffen und Rahmen für ein sauberes Layout anzuwenden.

Du erhältst ein HTML-Dokument mit drei div-Bereichen, die jeweils den book name, den author und eine short description enthalten. Deine Aufgabe ist es, diese Boxen mit width, height, margin, padding und borders zu gestalten.

Folge den unten stehenden Schritten:

Schreibe eine CSS-Regel mit einem Klassen-Selektor, die alle Elemente mit der Klasse "book" anspricht.
Setze die width jeder Buchbox auf 350px und die height auf 150px.
Füge ein padding von 15px innerhalb jeder Buchbox hinzu, um Platz um den Inhalt zu schaffen.
Setze einen solid border mit einer Breite von 3px und der Farbe black für jede Buchbox.
Füge einen margin von 20px zwischen den einzelnen Buchboxen hinzu, um sie voneinander abzusetzen.

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>