Desafío de repaso

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 43 de 76.

Desafío

Fácil

En este desafío de repaso, usarás box-sizing, border-radius, overflow, y box-shadow para dar estilo a artículos de periódico. Esto pondrá a prueba tu capacidad para controlar las dimensiones, gestionar el desbordamiento y mejorar el atractivo visual.

Se te proporciona un documento HTML con dos divisiones <div>, cada una de las cuales representa un artículo de periódico. Tu tarea es dar estilo a estos artículos usando box-sizing, border-radius, overflow, y box-shadow para mejorar su apariencia.

Sigue los pasos a continuación:

Escribe una regla CSS que seleccione todas las divisiones <div>.

Establece el ancho en 280px y la altura en 150px.
Usa box-sizing: border-box; para garantizar que el relleno y los bordes estén incluidos en el tamaño total.
Añade un relleno de 15px dentro de cada artículo para crear espacio alrededor del contenido.
Establece un borde sólido con un ancho de 3px y de color gris oscuro (#444).
Aplica border-radius de 10px para redondear las esquinas.
Añade un box-shadow con 4px 4px 8px rgba(0, 0, 0, 0.2) para proporcionar un sutil efecto elevado.
Establece overflow: scroll; para que los usuarios puedan desplazarse por el contenido desbordado.

Pruébalo tú mismo

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