Özet Meydan Okuması

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 38 / 76.

Görev

Kolay

Bu tekrar meydan okumasında, kitap bilgi kutularını stillendirmek için width, height, margin, padding, ve borders özelliklerini kullanacaksınız. Bu, içeriği yapılandırma, boşluk oluşturma ve temiz bir düzen için kenarlık uygulama yeteneğinizi test edecektir.

Size her biri book name, author ve short description içeren üç div bölümünden oluşan bir HTML belgesi verilmiştir. Göreviniz, width, height, margin, padding, ve borders kullanarak bu kutuları stillendirmektir.

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

"book" sınıfına sahip tüm öğeleri hedefleyen bir sınıf seçici kullanarak bir CSS kuralı yazın.
Her kitap kutusunun width değerini 350px ve height değerini 150px olarak ayarlayın.
İçerik etrafında boşluk oluşturmak için her kitap kutusunun içine 15px padding ekleyin.
Her kitap kutusu için 3px width genişliğinde ve black color renginde bir solid border ayarlayın.
Kitap kutularını birbirinden ayırmak için aralarına 20px margin ekleyin.

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>