CSS Variables (Tema & Kostumisasi)
Selamat!! Kamu telah sampai di materi terakhir CSS dasar & menengah. Untuk menutup petualangan ini, kita
akan mempelajari sebuah fitur ultra modern yang dinamakan CSS Variables (atau resmi disebut
Custom Properties).
Bayangkan kamu sedang membangun website dengan ribuan halaman. Jika klien tiba-tiba meminta: "Ayo ubah
warna biru perusahaannya jadi sedikit lebih gelap ya"... Apakah kamu akan mengubah manual ke 1000
baris kodemu?
Tentu tidak. Gunakan Variabel!
📥 1. Mendeklarasikan Variabel CSS
Anggap variabel sebagai sebuah ember yang diberi label nama. Kita memasukkan benda (misal: warna, angka piksel,
nama font) ke dalam ember itu, agar bisa dituang ke berbagai tempat nanti. Kita menyimpan ember ini di dalam
brankas besar bernama :root (Akar terluar HTML).
Gaya Tradisional (Lelah)
.header { background: #4F46E5; }
.tombol { background: #4F46E5; }
.link-teks { color: #4F46E5; }
/* Aduh, harus ngetik #4F46E5 terus! */Gaya Modern (Satu Komando) TERBAIK
/* -- MENDUPLIKAT KUNCI DI BRANKAS -- */
:root {
--warna-utama: #4F46E5;
}
/* -- TINGGAL PANGGIL NAMANYA! -- */
.header { background: var(--warna-utama); }
.tombol { background: var(--warna-utama); }
.link-teks { color: var(--warna-utama); }Catatan Penting: Nama
variabel CSS harus selalu diawali dengan dua buah tanda garis datar (strip): --nama-variabel-kamu.
🦇 2. Dark Mode Instan Berkat Variabel
Keajaiban terbesar CSS Variable adalah kecepatan kita mengganti gaya (Tema). Kita hanya butuh membuat blok penimpa (override) pada level root dan mengganti nilai ember warna Putih menjadi warna Hitam, maka jeng...jreng! Seluruh website akan berubah seketika.
Selamat Datang!
Ini adalah simulasi website yang dibangun sepenuhnya menggunakan CSS Variables.
Paket VIP
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor inci.
:root {
--bg-color: #FFFFFF;
--text-color: #111827;
--card-bg: #F3F4F6;
--accent: #4F46E5;
}
/* --- SAAT CLASS "DARK" KITA AKTIFKAN TERTIMPA! --- */ [data-theme="dark"] {
--bg-color: #111827;
--text-color: #F9FAFB;
--card-bg: #1F2937;
--accent: #818CF8;
}
🧮 3. Kekuatan Kalkulator CSS (Calc + Var)
Variable akan semkain Overpowered ketika difungsikan bersama perintah calc(). Kita bisa menyuruh CSS melakukan
perhitungan matematika otomatis!
Misalnya, membuat layout yang mengurangi 1 lebar padding secara otomatis agar pas.
Menghitung Sisa Layar Navbar
Bayangkan kamu punya menu navigasi fix yang tinggi-nya
70px (disimpan di variabel --tinggi-nav). Kamu
ingin konten di bawahnya langsung mengambil tinggi layaknya 100% sisa monitor ke bawah.
:root {
--tinggi-nav: 70px;
}
.konten-utama {
/* Tinggi 100vh layarmu DIKURANGI tinggi navbar */
height: calc(100vh - var(--tinggi-nav));
}
100vh
-
70px
)
Selamat Lulus CSS!
Beri tepuk tangan untuk dirimu sendiri! Kamu luar biasa karena berhasil mencapai titik akhir Modul CSS murni ini. Kamu tak lagi memandang website hanya sebagai tumpukan gambar, tapi sebagai mahakarya dari Flexbox, Grid, Variabel, dan Animasi yang terstruktur indah.
Lanjut Belajar Tailwind CSSPersiapkan dirimu untuk materi Javascript Pembangun Logika!
Materi Ini Bermanfaat?
Seluruh rangkaian kursus CSS ini kami susun dengan penuh dedikasi dan disediakan 100%
Gratis tanpa iklan yang mengganggu.
Jika kamu merasa panduan ini membantumu melangkah lebih dekat menjadi seorang Web Developer, kamu bisa mendukung kreativitas kami
dengan memberikan donasi "traktir kopi". Dukunganmu, sekecil apapun, akan sangat menjadi bahan bakar
kami untuk terus meracik kurikulum-kurikulum canggih berikutnya! 🔥
Pembayaran 100% aman via Clicky.id (QRIS, GoPay, OVO, Transfer Bank)
🤝 Berbagi Pintu Rezeki
Masih banyak ratusan talenta di luar sana yang terhalang meraih mimpiannya karena mahalnya biaya kursus IT. Satu klik darimu bisa memberikan harapan bagi mereka yang kesulitan finansial untuk belajar *coding* dengan standar industri!
Template Pesan (Tinggal Copy)