CSS Hiyerarşisi & CSS Öncelik Sırası

CSS öncelik sırası HTML etiketlerine atanan CSS’lerin hiyerarşik olarak öncelik durumudur.

HTML etiketlerine biçim vermek için kullanılan CSS kurallarının öncelikleri nelerdir? !important kavramı ne zaman ve hangi durumlarda kullanılır?

CSS Öncelik Sırasını Etkileyen Kavramlar

• Inline CSS (Doğrudan etiket üzerinde kullanılan CSS)
• Internal CSS (Aynı sayfada <style></style> etiketleri arasında kullanılan CSS.)
• External CSS (Dışarıdan (dosya yolundan veya başka bir site üzerinden) <link> etiketi ile çağırılan CSS.)
• Class
• Id
• !important

Id > Class > Etiket

Class, ID ve etiketlere verilen CSS özelliklerinin hangileri önceliklidir?

Eğer bir HTML etiketi üzerinde internal CSS türü olarak ID, Class ve doğrudan etikete verilen CSS kuralı bulunuyorsa, tarayıcı CSS öncelik sırasını ID > Class > Etiket olarak uygular.

Inline > Internal > External CSS Öncelik Sıralaması

External, internal ve inline CSS çeşitlerinin kullanımında CSS öncelik verme sırası tarayıcı tarafında inline > internal > external şeklinde olacaktır.

Not: External CSS kodu CSS sekmesinden görülebilir.

Fakat bu önceliklendirme her CSS uygulama çeşidinin aynı şekilde kullanıldığı durumda geçerlidir. Örnek olarak external ve internal CSS kullanımında her ikisininde id’ye veya class’a veya etikete uygulanmış olması gerekmektedir, farklı durumlarda öncelik sırası yine değişecektir.