Desafío de repaso

Parte de la sección Styling with CSS del Journey de HTML de Coddy. Lección 38 de 76.

Desafío

Fácil

En este desafío de repaso, utilizarás width, height, margin, padding, y borders para dar estilo a cuadros de información de libros. Esto pondrá a prueba tu capacidad para estructurar contenido, crear espaciado y aplicar bordes para un diseño limpio.

Se te proporciona un documento HTML con tres divisiones div, cada una con el book name, author y una short description. Tu tarea es dar estilo a estos cuadros utilizando width, height, margin, padding, y borders.

Sigue los pasos a continuación:

Escribe una regla CSS utilizando un selector de clase que apunte a todos los elementos con la clase "book".
Establece el width de cada cuadro de libro en 350px y el height en 150px.
Agrega un padding de 15px dentro de cada cuadro de libro para crear espacio alrededor del contenido.
Establece un solid border con un 3px width y black color para cada cuadro de libro.
Agrega un margin de 20px entre cada cuadro de libro para espaciarlos.

Pruébalo tú mismo

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