CSS Variabel cara Anti lupa kode HTML CSS HTML Tips CSS Variabel cara Anti lupa kode HTML CSS Variabel cara Anti lupa kode HTML oleh Handy Eko Cahyono • Kamis, Juni 23, 2022 • Update terakhir : Jumat, Juli 01, 2022. 0 Overide Variable CSS Postingan terkait: Daftar isi: Intro Hal yang sering terjadi pada saat memodifikasi halaman website ataupun blog adalah lupa format penulisan nama font-family sampai kode warna. Atau bisa jadi ingat kodenya tapi terlalu panjang ataupun ribet untuk mencari kode sumbernya untuk di-copy paste. Hambatan seperti diatas bisa ditangani dengan sekali setting diawal menggunakan CSS Variabel atau biasa ditemukan dengan kode penulisan CSS seperti ini : var(--text) atau var(--input-text). Begini cara kerjanya. Variabel - var() Contoh 1 : Penulisan CSS tradisional : .h1 { font: 700 25px Helvetica , sans-serif; color: blue } .h2 { font: 600 20px Arial, sans-serif; color: mediumblue} .h3 { font: 500 18px Roboto, sans-serif; color: red } .p { font: 400 16px Roboto, sans-serif; color: brown } .textarea {font: 400 15px monospace,monospace; color: darkred} CSS Menggunakan variabel : .h1 { font: var(--h1); color: var(--blue)} .h2 { font: var(--h2); color: var(--m-blue) } .h3 { font: var(--h3); color: var(--red) } .p { font: var(--p); color: var(--brown) } .textarea {font: var(--text-font); color: var(--d-red)} Tampilan menggunakan CSS variabel : Ini judul h1 Ini judul h2 Ini judul h3 Ini teks paragraf Ini teks dari textarea Nilai dari var(--) tidak mengikat, bebas menggunakan teks pengganti apa saja yang paling mudah diingat. Asalkan tetap menggunakan tanda minus ganda (--). Misalkan pada situasi tertentu terdapat elemen yang ternyata membutuhkan nilai yang sama dengan yang ada pada variabel, bisa dengan mudah menerapkan variabel tersebut pada elemen yang diinginkan. Contoh, masih mengacu pada penggunaan variabel diatas: Misal ingin menerapkan font yang sama dengan p { } yaitu font:var(--p) pada link, maka penulisan kodenya : a { font:var(--p); color:blue} Selanjutnya, bagaimana cara menerapkan CSS variabel ini dalam blog, dibawah ini praktiknya. Membuat CSS Variable Mengatur variabel dasar Agar penggunaan variabel berhasil, langkah pertama harus membuat variabel dasarnya dulu yang nanti dipanggil melalui var(--). Buat variabel dasarnya diawali dengan selector html atau :root seperti ini : html, /*-- atau --*/ :root { --h1:700 25px Helvetica , sans-serif; --h2:600 20px Arial, sans-serif; --h3:500 18px Roboto, sans-serif; --p:400 16px Roboto, sans-serif; --text-font:400 15px monospace, monospace; --blue:blue; --red:red; --brown:brown; --m-blue:mediumblue; --d-red:darkred; } Kode HTML pada contoh Perhatikan kode HTML ini : Contoh diatas menggunakan tag <span> <span class='h1'>Ini judul h1</span> <span class='h2'>Ini judul h2</span> <span class='h3'>Ini judul h3</span> <span class='p'>Ini teks paragraf</span> <span class='textarea'>Ini teks dari textarea</span> Silahkan ambil kesimpulan sendiri mengenai CSS variable ini dan selamat mencoba. Tags: CSS HTML Tips Facebook Twitter