Sfida di riepilogo

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

Sfida

Facile

In questa sfida di riepilogo, userai larghezza, altezza, margine, spaziatura interna e bordi per formattare le caselle con le informazioni sui libri. Metterai alla prova la tua capacità di strutturare i contenuti, creare spaziatura e applicare bordi per ottenere un layout ordinato.

Ti viene fornito un documento HTML con tre divisioni div, ognuna con il nome del libro, l'autore e una breve descrizione. Il tuo compito è formattare queste caselle usando larghezza, altezza, margine, spaziatura interna e bordi.

Segui i passaggi riportati di seguito:

Scrivi una regola CSS usando un selettore di classe che individui tutti gli elementi con la classe "book".
Imposta la larghezza di ogni casella del libro su 350px e l'altezza su 150px.
Aggiungi una spaziatura interna di 15px a ogni casella del libro per creare spazio attorno al contenuto.
Imposta un bordo solido con una larghezza di 3px e di colore nero per ogni casella del libro.
Aggiungi un margine di 20px tra ogni casella del libro per distanziarle.

Provalo tu

<html>
<head>
    <title>Book collection</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="book">
        <h3>Harry Potter and the Sorcerer's Stone</h3>
        <p>Author: J.K. Rowling</p>
        <p>Description: A young wizard's journey to defeat a dark wizard.</p>
    </div>

    <div class="book">
        <h3>The Great Gatsby</h3>
        <p>Author: F. Scott Fitzgerald</p>
        <p>Description: A tragic story of wealth, love, and betrayal in the 1920s.</p>
    </div>

    <div class="book">
        <h3>1984</h3>
        <p>Author: George Orwell</p>
        <p>Description: A dystopian novel about totalitarianism and surveillance.</p>
    </div>
</body>
</html>