Tekrar Ödevi

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 38 / 76.

Görev

Kolay

Bu özetleme görevinde, kitap bilgisi kutularını biçimlendirmek için width, height, margin, padding ve borders kullanacaksın. Bu görev, içeriği yapılandırma, boşluk oluşturma ve düzenli bir görünüm için kenarlık uygulama becerini test edecek.

Her birinde kitap adı, yazar ve kısa bir açıklama bulunan üç div bölümü içeren bir HTML belgesi veriliyor. Görevin, bu kutuları width, height, margin, padding ve borders kullanarak biçimlendirmek.

Aşağıdaki adımları izle:

"book" sınıfına sahip tüm öğeleri hedefleyen, sınıf seçici kullanan bir CSS kuralı yaz.
Her kitap kutusunun width değerini 350px ve height değerini 150px olarak ayarla.
İçerik çevresinde boşluk oluşturmak için her kitap kutusunun içine 15px padding ekle.
Her kitap kutusu için 3px genişliğinde ve siyah renkte düz bir kenarlık ayarla.
Kutular arasında boşluk oluşturmak için her kitap kutusunun arasına 20px margin ekle.

Kendin dene

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