Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 44 : Cara Menggunakan Property Hover di CSS. Pada tutorial kali ini, kita akan mempelajari cara menggunakan property !important untuk mengubah prioritas sebuah kode CSS.
Properti ini di CSS digunakan untuk memberikan prioritas utama dibandingkan dengan properti normal. Kata !important artinya ‘ini penting’. Aturan ini menyediakan cara membuat cascade di CSS.
Jika kita menerapkan properti ini pada teks, maka prioritas teks tersebut lebih tinggi dari prioritas lainnya.
Disarankan untuk tidak menggunakan properti CSS ini ke dalam program karena jika tidak sangat diperlukan.
Semakin banyak menggunakan properti ini akan menyebabkan banyak kesulitan dalam merubah desain website.
Jika aturan CSS didefinisikan dengan atribut ini, maka aturan lain akan diabaikan dan memprioritaskan aturan dengan property !important .
Jika kita menggunakan lebih dari satu deklarasi bertanda !important , itu berarti yang baru ditandai !important akan menggantikan yang sebelumnya.
Properti ini meningkatkan prioritas properti CSS dan mengabaikan properti utama.
Sintaksis
font-size: 14px !important ;
color: blue !important ;
…
}
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white ;
}
h1 {
color:red !important ;
}
body {
background-color:lightblue !important ;
text-align:center;
background-color:yellow;
}
</style>
</head>
<body>
<h1>Selamat datang dunia.</h1>
<h1>Selamat datang di mbahwp.com. Ini adalah contoh dari property<i>!important </i>.</h1>
</body>
</html>Hasil dari kode di atas adalah :
Pada contoh di atas, kita dapat melihat bahwa alih-alih kuning, warna latar belakang body adalah biru muda karena, di tag body, kode !important diterapkan setelah warna background biru muda.
Mari kita ambil contoh lain dari properti ini untuk memahaminya dengan lebih jelas.
Dalam contoh ini, kita menerapkan atribut !important di tepi teks. Warna batas heading h1 akan tetap merah meskipun ada deklarasi lain. Warna dan warna batas heading h2 akan tetap hijau dan ungu meskipun ada deklarasi lain.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
text-align: center;
}
h1 {
border-color: red !important ;
border: 5px green solid;
border-color: black;
}
h2{
color: green !important ;
color: red;
border-color:violet !important ;
border: 5px green solid;
}
</style>
</head>
<body>
<h1>Helo dunia:) :)</h1>
<h2>Selamat datang di mbahwp.com</h2>
</body>
</html>
Hasil dari kde di atas adalah :
Semoga tutorial ini membantu Anda untuk belajar menggunakan property !important untuk membuat sebuah perintah CSS menjadi prioritas utama.
