CSS Variabel cara Anti lupa kode HTML

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.