Recap Challenge

Part of the Styling with CSS section of Coddy's HTML journey — lesson 38 of 76.

Challenge

Easy

In this recap challenge, you'll use width, height, margin, padding, and borders to style book information boxes. This will test your ability to structure content, create spacing, and apply borders for a clean layout.

You are given an HTML document with three div divisions, each with the book name, author, and a short description. Your task is to style these boxes using width, height, margin, padding, and borders.

Follow the steps below:

Write a CSS rule using a class selector that targets all elements with the class "book".
Set the width of each book box to 350px and the height to 150px.
Add padding of 15px inside each book box to create space around the content.
Set a solid border with a 3px width and black color for each book box.
Add margin of 20px between each book box to space them out.

Try it yourself

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