Birden fazla kural bir öğeyi şekillendirebilecek olduğunda, iki mekanizma sonucu belirler: kaskad (hangi kural kazanır) ve kalıtım (hangi özelliklerin ebeveynlerden çocuklara geçtiği).
Tarayıcı, öncelik sırasına göre kontrol ederek kazanan bildirimi seçer:
1. Importance → !important beats normal declarations
2. Specificity → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
p { color: blue; } /* specificity 0,0,1 */
.text { color: green; } /* specificity 0,1,0 → wins over the element rule */
p { color: red; } /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
Bazı özellikler (çoğunlukla metinle ilgili) torunlar tarafından otomatik olarak miras alınır; çoğu alınmaz.
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
Varsayılan olarak miras alınan: color, font-*, line-height, text-align, visibility, cursor. Miras alınmayan: border, margin, padding, background, width, height, display.
.child {
color: inherit; /* force-take the parent's value */
border: initial; /* reset to the property's default */
all: unset; /* reset everything: inherit if inheritable, else initial */
}
Düşük özgüllüklü bir kuralın daha sonra yazılsa bile neden kaybedebileceğinin nedeni — özgüllük kaynak sırasından önce kontrol edilir. Sırayı anlamak (önem → özgüllük → kaynak sırası) "stilim uygulanmıyor" durumunun neredeyse her örneğini açıklar.
Kaskad ve kalıtım, CSS'nin gerçekten nasıl çözdüğünün temel modelidir.
Öncelik sırasını bilmek çakışmaları hata ayıklar, hangi özelliklerin miras alındığını bilmek color/font öğesini body üzerinde bir kez ayarlamanızı sağlar, ve inherit/initial/unset hassas kontrol verir — birlikte CSS'yi sihirli yerine öngörülebilir yaparlar.