जब कुनै element लाई style गर्न सक्ने धेरै rules हुन्छन्, दुई mechanisms ले परिणाम निर्णय गर्छन्: cascade (कुन rule जिते) र inheritance (कुन properties माता-पिता बाट तलतिर जान्छन्)।
ब्राउजरले जितेको declaration छान्छ, प्राथमिकता क्रमानुसार जाँच गरी:
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) */
केही properties (ज्यादातर text-related) स्वचालित रूपमा descendantsले पाउँछन्; अधिकांश पाउँदैनन्।
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
पूर्वनिर्धारितमा Inherited: color, font-*, line-height, text-align, visibility, cursor। Inherited नहुने: 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 */
}
यो कारण हो कि कम-specificity rule पनि पछि लेखिएको भएन पनि हार्न सक्छ — specificity source order अघि जाँच गरिन्छ। क्रम बुझ्नु (importance → specificity → source order) लगभग हरेक "मेरो style लागू भइरहेको छैन" केस व्याख्या गर्छ।
Cascade र inheritance CSS कसरी वास्तवमा समाधान गर्छ भन्ने कुराको मूल मडेल हो।
प्राथमिकता क्रम जान्नु द्वन्द्वहरू debug गर्छ, कुन properties inherit हुन्छन् भन्ने जान्नु तपाईंलाई color/font एक पल body मा सेट गर्न दिन्छ बरु सबै जायगामा, र inherit/initial/unset तपाईंलाई सटीक नियन्त्रण दिन्छन् — एकसाथ तिनीहरू CSS लाई जादू भन्दा पूर्वानुमानित बनाउँछन्।