Défi récapitulatif

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 38 sur 76.

Défi

Facile

Dans ce défi récapitulatif, vous utiliserez width, height, margin, padding, and borders pour styliser des boîtes d'information de livres. Cela testera votre capacité à structurer le contenu, à créer de l'espacement et à appliquer des bordures pour une mise en page propre.

On vous donne un document HTML avec trois divisions div, chacune contenant le book name, l'author, et une short description. Votre tâche est de styliser ces boîtes en utilisant width, height, margin, padding, and borders.

Suivez les étapes ci-dessous :

Écrivez une règle CSS utilisant un sélecteur de classe qui cible tous les éléments avec la classe "book".
Définissez la width de chaque boîte de livre à 350px et la height à 150px.
Ajoutez un padding de 15px à l'intérieur de chaque boîte de livre pour créer de l'espace autour du contenu.
Définissez une solid border avec une largeur de 3px et la couleur black pour chaque boîte de livre.
Ajoutez une margin de 20px entre chaque boîte de livre pour 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>