Tantangan Ulasan

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 38 dari 76.

Tantangan

Mudah

Dalam tantangan rangkuman ini, kamu akan menggunakan lebar, tinggi, margin, padding, dan border untuk menata kotak informasi buku. Ini akan menguji kemampuanmu menyusun konten, membuat jarak, dan menerapkan border agar tata letaknya rapi.

Kamu diberi dokumen HTML dengan tiga bagian div, masing-masing berisi nama buku, penulis, dan deskripsi singkat. Tugasmu adalah menata kotak-kotak ini menggunakan lebar, tinggi, margin, padding, dan border.

Ikuti langkah-langkah berikut:

Tulis aturan CSS menggunakan pemilih class yang menargetkan semua elemen dengan class "book".
Atur lebar setiap kotak buku menjadi 350px dan tinggi menjadi 150px.
Tambahkan padding sebesar 15px di dalam setiap kotak buku untuk memberi ruang di sekitar konten.
Atur border solid dengan lebar 3px dan warna hitam untuk setiap kotak buku.
Tambahkan margin sebesar 20px di antara setiap kotak buku agar ada jarak.

Coba sendiri

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