Recap Challenge

Part of the Styling with CSS section of Coddy's HTML journey. Lesson 43 of 76.

Challenge

Easy

In this recap challenge, you'll use box-sizing, border-radius, overflow, and box-shadow to style newspaper articles. This will test your ability to control dimensions, handle overflow, and enhance visual appeal.

You are given an HTML document with two <div> divisions, each representing a newspaper article. Your task is to style these articles using box-sizing, border-radius, overflow, and box-shadow to improve their appearance.

Follow the steps below:

Write a CSS rule that targets all the <div> divisions.

Set the width to 280px and the height to 150px.
Use box-sizing: border-box; to ensure padding and borders are included in the total size.
Add padding of 15px inside each article to create space around the content.
Set a solid border with a 3px width and dark gray (#444).
Apply border-radius of 10px to round the corners.
Add a box-shadow with 4px 4px 8px rgba(0, 0, 0, 0.2) to give a subtle lifted effect.
Set overflow: scroll; so users can scroll through overflowing content.

Try it yourself

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