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>