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 43 trên 76.

Thử thách

Dễ

Trong thử thách ôn tập này, bạn sẽ dùng box-sizing, border-radius, overflow và box-shadow để định dạng các bài báo. Thử thách này sẽ kiểm tra khả năng kiểm soát kích thước, xử lý nội dung tràn và cải thiện tính thẩm mỹ của bạn.

Bạn được cung cấp một tài liệu HTML có hai phần tử <div>, mỗi phần tử đại diện cho một bài báo. Nhiệm vụ của bạn là định dạng các bài báo này bằng box-sizing, border-radius, overflow và box-shadow để cải thiện giao diện.

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

Viết một quy tắc CSS áp dụng cho tất cả phần tử <div>.

Đặt chiều rộng là 280px và chiều cao là 150px.
Dùng box-sizing: border-box; để đảm bảo phần đệm và đường viền được tính vào kích thước tổng thể.
Thêm phần đệm 15px bên trong mỗi bài báo để tạo khoảng trống quanh nội dung.
Đặt đường viền liền có độ rộng 3px và màu xám đậm (#444).
Đặt border-radius là 10px để bo tròn các góc.
Thêm box-shadow với giá trị 4px 4px 8px rgba(0, 0, 0, 0.2) để tạo hiệu ứng nổi nhẹ.
Đặt overflow: scroll; để người dùng có thể cuộn qua nội dung bị tràn.

Tự làm thử

<html>
<head>
    <title>Newspaper Layout Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="headline">
        <h3>Biggest Tech Breakthrough of 2025!</h3>
        <p>Scientists have unveiled a revolutionary AI model that can predict climate changes with 99% accuracy.  
        This groundbreaking innovation is expected to transform how governments and organizations respond to global  
        warming, extreme weather events, and natural disasters. Experts believe that integrating AI-driven forecasting  
        with existing climate policies will significantly reduce environmental damage over the next decade.</p>
    </div>
    <div class="article">
        <h3>Opinion: The Future of Web Design</h3>
        <p>As CSS evolves, developers are experimenting with more dynamic layouts and interactive user experiences...</p>
    </div>
</body>
</html>