Défi récapitulatif

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

Défi

Facile

Dans ce défi récapitulatif, tu utiliseras la largeur, la hauteur, la marge, le remplissage et les bordures pour mettre en forme des boîtes d’informations sur des livres. Cela testera ta capacité à structurer le contenu, à créer de l’espace et à appliquer des bordures pour obtenir une mise en page claire.

On te fournit un document HTML contenant trois divisions div, chacune avec le nom du livre, l’auteur et une courte description. Ta tâche consiste à mettre en forme ces boîtes à l’aide de la largeur, la hauteur, la marge, le remplissage et les bordures.

Suis les étapes ci-dessous :

Écris une règle CSS utilisant un sélecteur de classe qui cible tous les éléments possédant la classe "book".
Définis la largeur de chaque boîte de livre sur 350px et la hauteur sur 150px.
Ajoute un remplissage de 15px à l’intérieur de chaque boîte de livre afin de créer de l’espace autour du contenu.
Définis une bordure pleine d’une largeur de 3px et de couleur noire pour chaque boîte de livre.
Ajoute une marge de 20px entre chaque boîte de livre afin de les espacer.

Essayez vous-même

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