Desafio de Revisão

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

Desafio

Fácil

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

Você recebeu um documento HTML com três divisões div, cada uma contendo o nome do livro, o autor e uma breve descrição. Sua tarefa é estilizar essas caixas usando width, height, margin, padding e borders.

Siga as etapas abaixo:

Escreva uma regra CSS usando um seletor de classe que direcione todos os elementos com a classe "book".
Defina a width de cada caixa de livro como 350px e a height como 150px.
Adicione padding de 15px dentro de cada caixa de livro para criar espaço ao redor do conteúdo.
Defina uma borda sólida com 3px de largura e cor preta para cada caixa de livro.
Adicione margin de 20px entre cada caixa de livro para criar espaçamento entre elas.

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>