Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Important Kullanımı konusunu öğreneceğiz.
CSS'de !important özelliği, bir değere daha fazla önem verilmesi gerektiği durumlarda kullanılır. Bir nevi zorunlu tutmak olarak düşünülebilir.
Important kuralı uygulandığı yerde belirli bir özellik için önceki tüm stiller geçersiz kılınır.
#box {
background-color: blue;
}
.content {
background-color: gray;
}
p {
background-color: red !important;
}
Yukarıdaki örnekte, p etiketi ister .content classını kullansın isterse #box id'sini kullansın arkaplanı her zaman kırmızı olacaktır. Bunun sebebi tüm p etiketleri için arkaplanın kırmızı olması gerektiğini !important özelliği ile belirtilmesidir. Kendinden önce gelen tüm stilleri devre dışı bırakıp kendi belirlediği stili uygular.
Important kuralını ezmenin tek yolu tekrar bir important yazmaktır. Peki tarayıcı hangi important kuralını kabul edecektir ? Önceki bölümlerde anlattığımız üzere, CSS'de ki öncelik sırasına göre important kuralı uygulanacaktır. Birden fazla important kullanmak kafa karıştırıcı olacaktır ve büyük stil dosyalarında hata ayıklama zorlaşacaktır.
Aşağıdaki örneğe baktığınızda hangi rengin en önemli olduğu net değil:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background-color: blue;
}
.content {
background-color: gray;
}
p {
background-color: red !important;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="content">This is some text in a paragraph.</p>
<p id="box">This is some text in a paragraph.</p>
</body>
</html>
Not : !important kuralı gerekli olduğu durumlarda kullanılmalıdır.