Zadanie podsumowujące

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 38 z 76.

Wyzwanie

Łatwy

W tym wyzwaniu podsumowującym użyjesz właściwości width, height, margin, padding i borders, aby nadać styl ramkom z informacjami o książkach. Sprawdzisz w ten sposób swoją umiejętność porządkowania treści, tworzenia odstępów i stosowania obramowań, aby uzyskać przejrzysty układ.

Otrzymujesz dokument HTML z trzema elementami div, z których każdy zawiera tytuł książki, autora i krótki opis. Twoim zadaniem jest nadanie stylu tym ramkom za pomocą właściwości width, height, margin, padding i borders.

Wykonaj poniższe kroki:

Napisz regułę CSS z użyciem selektora klas, która wybiera wszystkie elementy z klasą "book".
Ustaw szerokość każdej ramki książki na 350px, a jej wysokość na 150px.
Dodaj wewnętrzny odstęp 15px w każdej ramce książki, aby utworzyć odstęp wokół treści.
Ustaw ciągłe obramowanie o szerokości 3px i czarnym kolorze dla każdej ramki książki.
Dodaj zewnętrzny odstęp 20px między ramkami książek, aby je od siebie oddzielić.

Spróbuj swoich sił

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