DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial belajar css # Mengenal important value

advertisement
Mengenal !important value

Perlu kita ketahui bahwa ketika kita menulis code html, css ataupun javascript, web browser akan mengeksekusi kode mulai dari baris pertama hingga baris terakhir.
Oleh karena itu ketika kita menulis selector yang sama dengan properti yang sama pula, maka nilai properti yang digunakan adalah nilai properti pada selector terakhir.
Biar lebih jelas, kita lihat snippet kode berikut,
Mengenal !important value
Properti color untuk elemen <p> adalah properti color dari selector p yang terakhir. Sehingga elemen <p> memiliki warna teks biru.
Lalu gimana caranya jika kita ingin nilai properti pada selector sebelumnya yang digunakan untuk menstyling elemen.
Itulah yang akan kita bahas pada tutorial kali ini.

Apa itu important value

Important value pada properti adalah aturan yang digunakan untuk memberitahu kepada web browser bahwa nilai dari properti itulah yang harus di terapkan untuk mengatur style elemen.
Importan value di tandai dengan nilai properti !important.
Mengenal important value css
Perlu diketahui, penggunakan kode !important  hanya digunakan pada internal dan eksternal css. Sedangkan pada inline css, secara otomatis akan dianggap important dan mengabaikan properti dengan nilai yang sama pada eksternal css maupun internal css.

Cara membuat important value

Untuk menggunakan important value caranya cukup mudah, kita hanya perlu menambahkan kode !important di akhir nilai properti.
Sehingga web browser akan menganggap bahwa nilai properti itulah yang perlu di terapkan.
h1{font-size:14px !important}
Lalu bagaimana jika ada dua selector atau lebih yang sama dengan properti yang sama pula, dan sama-sama memiliki kode !important.
h1{font-size:14px !important}
h1{font-size:16px !important}
h1{font-size:17px !important}
Maka kembali ke aturan awal, yaitu web browser akan menerapkan nilai properti yang di atur pada selector terakhir.
Hal ini berlaku jika selectornya sama, namun jika salah satunya memiliki selector yang lebih sepesifik dan sama sama memiliki !important value. Maka selector yang lebih spesifiklah yang akan di implementasikan.
body span h1{color:red}
span h1{color:blue}
h1{color:green}
Pada snippet kode di atas, web browser akan menerapkan selector body span h1{color:red} karena lebih spesifik.
Agar kalian lebih memahami aturannya, kalian bisa lihat gambar berikut
Mengenal important value

Kenapa perlu kode important?

Mungkin di antara teman-teman ada yang bertanya, kenapa repot-repot menulis kode !important, kenapa tidak kita hapus saja properti di selector yang samanya?.
Yup kita bisa menghapusnya jika kita menggunakan css sendiri.
Tapi bagaimana jika kita menggunakan librar css(eksternal css) yang kita tidak bisa merubah kodenya.
Misalnya kodenya seperti ini.
...
span p{color:red}
div p{color:yellow}
h1 p{color:blue}
article p{color:maroon}
...
Kita ingin mengatur semua elemen <p> memiliki warna teks hitam. Maka cara yang paling mudah adalah kita membuat selector baru dengan important value pada css milik kita.
Contohnya seperti berikut,
...
p{color:black!important}
...
Sehingga properti color pada selector p yang lain, yang tidak memiliki important value akan di abaikan oleh web browser.

Sampai disini pembahasan kita tentang important value.
Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share.
Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis dikolom komentar.
Good luck!
advertisement



0 Komentar untuk " Tutorial belajar css # Mengenal important value"

Silahkan berkomentar dengan baik dan bijak!