যখন একটি উপাদানকে স্টাইল করার জন্য বেশ কয়েকটি নিয়ম থাকতে পারে, তখন দুটি পদ্ধতি ফলাফল সিদ্ধান্ত নেয়: ক্যাসকেড (কোন নিয়ম জয়ী হয়) এবং ইনহেরিট্যান্স (কোন বৈশিষ্ট্যগুলি পিতামাতা থেকে নিচে চলে যায়)।
ব্রাউজার অগ্রাধিকার ক্রম অনুযায়ী চেক করে জয়ী ঘোষণা বেছে নেয়:
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) */
নির্দিষ্ট বৈশিষ্ট্য (বেশিরভাগ পাঠ্য-সম্পর্কিত) স্বয়ংক্রিয়ভাবে বংশধরদের দ্বারা উত্তরাধিকার হয়; বেশিরভাগ নয়।
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
ডিফল্টভাবে উত্তরাধিকার: color, font-*, line-height, text-align, visibility, cursor. উত্তরাধিকার নয়: 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 */
}
এটি এই কারণেই একটি কম-নির্দিষ্ট নিয়ম হারাতে পারে এমনকি যদি এটি পরে লেখা হয় — স্পেসিফিসিটি আগে উৎস ক্রম চেক করা হয়। ক্রম বোঝা (গুরুত্ব → স্পেসিফিসিটি → উৎস ক্রম) প্রায় প্রতিটি "আমার স্টাইল প্রয়োগ হচ্ছে না" ক্ষেত্রে ব্যাখ্যা দেয়।
ক্যাসকেড এবং ইনহেরিট্যান্স হল CSS কীভাবে প্রকৃতপক্ষে সমাধান করে এর মূল মডেল।
অগ্রাধিকার ক্রম জানা সংঘর্ষ ডিবাগ করে, কোন বৈশিষ্ট্যগুলি উত্তরাধিকার হয় তা জানা আপনাকে color/font একবার body-তে সেট করতে দেয় সর্বত্র নয়, এবং inherit/initial/unset আপনাকে নির্ভুল নিয়ন্ত্রণ দেয় — একসাথে তারা CSS কে ভবিষ্যদ্বাণীযোগ্য করে তোলে যা জাদু নয়।