Level 2 – Atur ukuran gambar atasTujuan: Cari class CSS yang membuat gambar di bagian atas lebih kecil, lalu tambahkan aturan baru.Langkah:Buka style.css.Temukan class yang dipakai untuk gambar atas (cek HTML, biasanya ada nama jelas seperti top-image).Tambahkan aturan baru di class itu (misal border, margin, padding).Contoh aturan baru:.top-image { width: 50px; /* ukuran kecil */ border: 2px solid red; /* aturan baru */}Pastikan di preview hanya gambar di class itu yang berubah.
Level 3 – Tambahkan class baru ke beberapa elemenTujuan: Buat class baru dan terapkan ke elemen HTML tertentu.Langkah:Tentukan elemen HTML mana yang ingin diberi class (misal beberapa gambar atau teks).Buat class baru di CSS, beri gaya yang berbeda:.highlight { color: blue; font-size: 20px;}Terapkan class ke elemen HTML:<p class=”highlight”>Teks penting</p><img class=”highlight” src=”…”>Cek preview → hanya elemen dengan class itu yang berubah.
Level 4 – Gabungkan beberapa classTujuan: Gunakan lebih dari satu class untuk satu elemen, efek digabung.Langkah:Buat beberapa class di CSS:.small { width: 50px;}.red-border { border: 2px solid red;}Terapkan lebih dari satu class di HTML (pisah dengan spasi):<img class=”small red-border” src=”…”>Cek preview → gambar memakai gabungan kedua class, elemen lain tetap normal.