Desafío de repaso

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 38 de 76.

Desafío

Fácil

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

Se te proporciona un documento HTML con tres divisiones div, cada una con el nombre del libro, el autor y una breve descripción. 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 se dirija a todos los elementos con la clase "book".
Establece el width de cada cuadro de libro en 350px y el height en 150px.
Añade un padding de 15px dentro de cada cuadro de libro para crear espacio alrededor del contenido.
Establece un borde sólido con un ancho de 3px y color negro para cada cuadro de libro.
Añade un margin de 20px entre cada cuadro de libro para separarlos.

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>