CSS Dersleri 33 - important Kullanımı


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.

Birden çok important kullanırsak ne olur ?

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.

 

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla
  • C# Dersleri

    C# Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 100 Ders
    Dil Türkçe
    Güncelleme 04/2024
    Derse Başla