Latihan 2: CSS Variables — CSS
Latihan 2 dari materi CSS Variables di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Simpan dua nilai gaya sebagai variabel, lalu pakai di kartu:
- Di dalam
:root { } yang masih kosong, buat dua variabel:
--radius dengan nilai 8px--shadow dengan nilai 0 2px 8px rgba(0,0,0,0.1)
- Di aturan
.kartu yang sudah ada, tambahkan:
border-radius: var(--radius)box-shadow: var(--shadow)
Di .kartu, nilainya dibaca lewat var(...), bukan diketik ulang. Itu dicek dari kodenya.
Hint
- Simpan dulu kedua nilai di :root, baru kartunya membaca dari sana.
- Di :root tulis dua variabel berawalan --. Di .kartu, border-radius dan box-shadow membaca variabel itu lewat var().
- :root { --radius: 8px; --shadow: 0 2px 8px rgba(0,0,0,0.1); } lalu di .kartu: border-radius: var(--radius); box-shadow: var(--shadow);
