Контрольное задание

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 38 из 76.

Задание

Легко

В этом итоговом задании вы будете использовать свойства width, height, margin, padding и borders для стилизации блоков с информацией о книгах. Это проверит ваше умение структурировать контент, создавать отступы и применять границы для создания аккуратного макета.

Вам дан HTML-документ с тремя блоками div, каждый из которых содержит название книги, автора и краткое описание. Ваша задача — стилизовать эти блоки, используя width, height, margin, padding и borders.

Выполните следующие шаги:

Напишите CSS-правило, используя селектор класса, которое выбирает все элементы с классом "book".
Установите width каждого блока книги равным 350px, а height — 150px.
Добавьте padding в 15px внутри каждого блока книги, чтобы создать пространство вокруг содержимого.
Установите для каждого блока книги сплошную границу (solid border) шириной 3px и цвета black.
Добавьте margin в 20px между блоками книг, чтобы разделить их.

Попробуйте сами

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