Thử thách ôn tập

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 38 trên 76.

Thử thách

Dễ

Trong thử thách ôn tập này, bạn sẽ dùng chiều rộng, chiều cao, lề, khoảng đệm và đường viền để định kiểu cho các hộp thông tin sách. Thử thách này sẽ kiểm tra khả năng sắp xếp nội dung, tạo khoảng cách và áp dụng đường viền để có bố cục gọn gàng.

Bạn được cung cấp một tài liệu HTML có ba phần tử div, mỗi phần tử gồm tên sách, tác giả và mô tả ngắn. Nhiệm vụ của bạn là định kiểu cho các hộp này bằng chiều rộng, chiều cao, lề, khoảng đệm và đường viền.

Thực hiện các bước sau:

Viết một quy tắc CSS dùng bộ chọn lớp để nhắm đến tất cả phần tử có lớp "book".
Đặt chiều rộng của mỗi hộp sách là 350px và chiều cao là 150px.
Thêm khoảng đệm 15px bên trong mỗi hộp sách để tạo khoảng trống quanh nội dung.
Đặt đường viền liền nét có độ rộng 3px và màu đen cho mỗi hộp sách.
Thêm lề 20px giữa các hộp sách để tạo khoảng cách giữa chúng.

Tự làm thử

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