Sfida di ripasso

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 43 di 76.

Sfida

Facile

In questa sfida di ripasso, userai box-sizing, border-radius, overflow e box-shadow per dare stile agli articoli di giornale. Metterai alla prova la tua capacità di controllare le dimensioni, gestire il contenuto in eccesso e migliorare l’aspetto visivo.

Ti viene fornito un documento HTML con due elementi <div>, ciascuno dei quali rappresenta un articolo di giornale. Il tuo compito è dare stile a questi articoli usando box-sizing, border-radius, overflow e box-shadow per migliorarne l’aspetto.

Segui i passaggi qui sotto:

Scrivi una regola CSS che selezioni tutti gli elementi <div>.

Imposta la larghezza su 280px e l’altezza su 150px.
Usa box-sizing: border-box; per assicurarti che padding e bordi siano inclusi nelle dimensioni totali.
Aggiungi un padding di 15px all’interno di ciascun articolo per creare spazio attorno al contenuto.
Imposta un bordo solido con uno spessore di 3px e di colore grigio scuro (#444).
Applica un border-radius di 10px per arrotondare gli angoli.
Aggiungi un box-shadow con 4px 4px 8px rgba(0, 0, 0, 0.2) per creare un leggero effetto di sollevamento.
Imposta overflow: scroll; in modo che gli utenti possano scorrere il contenuto eccedente.

Provalo tu

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