ধাপ
৪
আমরা জেনেছি CSS তিন ভাবে HTML ডকুমেন্টে যুক্ত করা যায়। এখন যদি একাধিক স্টাইল শিট একটি HTML ডকুমেন্টে যুক্ত থাকে তাহলে কি হবে?
ধরুন একটি এক্সটার্নাল স্টাইলশিটে h3 সিলেক্টের জন্য নিচের রুল সমূহ দেয়া আছেঃ
h3 {
color: red;
text-align: left;
font-size: 12px;
}তারপর, ধরি ইন্টারনাল স্টাইলশিটে একই h3 সিলেক্টরের জন্য আবার নিচের রুল সমূহ দেয়া আছেঃ
h3 {
text-align: right;
font-size: 20px;
}তাহলে h3 সিলেক্টরের নিচের বৈশিষ্ট্য সমূহ প্রদর্শিত হবেঃ
color: red;
text-align: right;
font-size: 20px;এখানে দেখা যাচ্ছে এক্টার্নাল স্টাইল শিট থেকে color প্রোপার্টি যুক্ত হয়েছে। আর text-align এবং font-size এ ইন্টার্নাল প্রোপার্টি সমূহ প্রাধান্য পেয়েছে। একে inheritance বলা হয়ে থাকে।
রুল সমূহের গুরুত্বকে এভাবে বলা হয় যে, যে রুল কনটেন্টের যত কাছে তার প্রাধান্য তত বেশী।
নিচে গুরুত্ব ক্রম দেখানো হলঃ
প্রত্যেক ব্রাউজারেই আগে থেকেই কিছু CSS রুল দেয়া থাকে। HTML ডকুমেন্টে কোনো স্টাইলশিট নির্দিষ্ট করা না থাকলে ব্রাউজারে দেয়া বৈশিষ্ট্য সমূহ প্রদর্শিত হয়।
ব্রাউজারের বৈশিষ্টের উপর প্রাধান্য পায় বহিঃস্থ স্টাইল শিট। বহিঃস্থ স্টাইলশিট <head> অংশে <link> ট্যাগ দ্বারা যুক্ত করা হয়। (নিয়ম)
বহিঃস্থ স্টাইলশিটের উপর এর প্রাধান্য। এটি <head> অংশে <style> ট্যাগের মাধ্যমে যুক্ত করা হয়। (নিয়ম)
সবার থেকে বেশী প্রাধান্য হচ্ছে inline স্টাইল। এলিমেন্ট ট্যাগে style এট্রিবিউট ব্যবহার করে ইনলাইন স্টাইল নির্দিষ্ট করে দেয়া যায়। (নিয়ম)
এলিমেন্টের ভিতর যা থাকে তাই কন্টেন্ট। সকল স্টাইল রুল সমূহ একে রূপ দিতেই কাজ করে।
আবার একই স্টাইলশিটে একই সিলেক্টরের জন্য পরস্পর বিরোধী রুল থাকলে সেখানে, যে সিলেক্টরটি যত নির্দিষ্ট করা থাকে সে সিলেক্টরের প্রোপার্টিজও তত প্রধান্য পায়।