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>