Défi récapitulatif

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 43 sur 76.

Défi

Facile

Dans ce défi récapitulatif, tu utiliseras box-sizing, border-radius, overflow et box-shadow pour styliser des articles de journal. Cela mettra à l’épreuve ta capacité à contrôler les dimensions, à gérer le dépassement de contenu et à améliorer l’aspect visuel.

On te fournit un document HTML contenant deux divisions <div>, chacune représentant un article de journal. Ta tâche consiste à styliser ces articles à l’aide de box-sizing, border-radius, overflow et box-shadow afin d’améliorer leur apparence.

Suis les étapes ci-dessous :

Écris une règle CSS qui cible toutes les divisions <div>.

Définis la largeur à 280px et la hauteur à 150px.
Utilise box-sizing: border-box; pour t’assurer que le remplissage et les bordures sont inclus dans la taille totale.
Ajoute un remplissage de 15px à l’intérieur de chaque article afin de créer de l’espace autour du contenu.
Définis une bordure pleine d’une largeur de 3px et de couleur gris foncé (#444).
Applique un border-radius de 10px pour arrondir les coins.
Ajoute une box-shadow avec 4px 4px 8px rgba(0, 0, 0, 0.2) pour donner un subtil effet de relief.
Définis overflow: scroll; afin que les utilisateurs puissent faire défiler le contenu qui dépasse.

Essayez vous-même

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