Desafio de Revisão

Parte da seção Styling with CSS do Journey de HTML da Coddy. Lição 38 de 76.

Desafio

Fácil

Neste desafio de recapitulação, você usará width, height, margin, padding, e borders para estilizar caixas de informações de livros. Isso testará sua habilidade de estruturar conteúdo, criar espaçamento e aplicar bordas para um layout limpo.

Você recebeu um documento HTML com três divisões div, cada uma com o book name, author, e uma short description. Sua tarefa é estilizar essas caixas usando width, height, margin, padding, e borders.

Siga os passos abaixo:

Escreva uma regra CSS usando um seletor de classe que segmente todos os elementos com a classe "book".
Defina o width de cada caixa de livro para 350px e o height para 150px.
Adicione padding de 15px dentro de cada caixa de livro para criar espaço ao redor do conteúdo.
Defina uma solid border com 3px width e black color para cada caixa de livro.
Adicione margin de 20px entre cada caixa de livro para espaçá-las.

Experimente você mesmo

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