যখন একটি ব্রাউজার স্টাইল শীট পরে, এটি স্টাইল শীট এর তথ্য অনুসারে ডকুমেন্টকে ফরমেট করে।
সিএসএস প্রবেশ করানোর তিনটি উপায় আছে
- বহিস্থিত স্টাইল শীট
- অন্তস্থিত স্টাইল শীট
- ইনলাইন স্টাইল
বহিস্থিত স্টাইল শীট
বহিস্থিত স্টাইল শীট দিয়ে, মাত্র একটি ফাইল পরিবর্তনের মাধ্যমে ওয়েব সাইটের চেহারা পরিবর্তন করে ফেলতে পারবেন।
প্রতিটি পেজের <link> এলিমেন্ট এর মধ্যে অবশ্যই বহিস্থিত স্টাইল শীটের একটি রেফারেন্স দিয়ে দিতে হবে। <link> এলিমেন্ট হেড সেকশন এর মধ্যে লিখতে হবেঃ
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
বহিস্তিত স্টাইল শীট যেকোন টেক্স্ট এডিটর এ লেখা যেতে পারে। এই ফাইলে কোন এইচটিএমএল ট্যাগ থাকতে পারবে না। স্টাইল শীট ফাইলটি অবশ্যই .css এক্সটেনশন দিয়ে সেভ করতে হবে।
“myStyle.css” নামের একটি স্টাইল শীটে ফাইলের উদাহরণ দেয়া হলোঃ
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
নোটঃ প্রোপার্টি মান এবং ইউনিট এর মধ্যে কোন স্পেস দিবেন না (যেমন margin-left: 20 px;)। সঠিক পদ্ধতি হচ্ছে margin-left: 20px;
অন্তস্থিত স্টাইল শীট
যদি একটি নির্দিষ্ট পেজ এর স্টাইল ইউনিক (অনন্য) হয় তাহলে অন্তস্থিত স্টাইল শীট ব্যবহার করা হয়।
অন্তস্থিত স্টাইল শীট হেড সেকশন এর <style> এলিমেন্ট এর মাঝে লেখা হয়।
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
ইনলাইন স্টাইল
ইনলাইন স্টাইল মাত্র একটি এলিমেন্ট এর উপর অনন্য স্টাইল প্রয়োগ করতে ব্যবহৃত হয়।
একটি ইনলাইন স্টাইল স্টাইল শীটের অনেক সবিধা গ্রহণ করা থেকে বঞ্চিত হয়। সংযতভাবে এই পদ্ধতি ব্যবহার করুন।
ইনলাইন স্টাইল ব্যবহার করার জন্য কাঙ্খিত ট্যাগ এর সাথে স্টাইল এট্রিবিউট যোগ করুন। স্টাইল এট্রিবিউট যেকোন সিএসএস প্রোপার্টি ধারণ করতে পারে। নিচের উদাহরণে <h1> এলিমেন্ট এর রঙ এবং বাম মার্জিন কিভাবে পরিবর্তন করা যায় তা দেখানো হলোঃ
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
একাধিক স্টাইল শীট
যদি কিছু প্রোপার্টি ভিন্ন স্টাইল শটের একই সিলেক্টর দ্বারা নির্ধারিত হয় তাহলে মানগুলো একত্রিত হয়ে আরো সুনির্ধিষ্ট হয়।
উদাহরণ স্বরুপ, একটি বহিস্থিত স্টাইল শটি এর <h1> এলিমেন্ট নিম্নোক্ত প্রোপার্টি রয়েছে:
h1 {
color: navy;
margin-left: 20px;
}
একটি অন্তস্থিত স্টাইল শীটেরও <h1> এলিমেন্ট এর নিম্নোক্ত প্রোপার্টি রয়েছে:
h1 {
color: orange;
}
যদি পেজটির অন্তস্থিত স্টাইল শীটের সাথে বহিস্থিত স্টাইল শীট সংযুক্ত থাকে তাহলে <h1> এলিমেন্ট এর প্রোপার্টি হবে:
color: orange; margin-left: 20px;
বাম মার্জিনটি বহিস্থিত স্টাইল শীটের সাথে মিলিত হয়েছে এবং রঙ অন্তস্থিত স্টাইল শীটের অনুরূপ পরিবর্তিত হয়েছে।
একাধিক স্টাইল একটির মধ্যে ক্যাসকেড করবে
স্টাইল নির্ধারণ করা যেতে পারে:
- একটি বহিস্থিত স্টাইল ফাইলের মধ্যেে
- এইচটিএমএল পেজ এর <head> সেকশন এর মাঝেে
- এইচটিএমএল এলিমেন্ট এর মাঝে
ক্যাসকেড ক্রম
এইচটিএমএল এলিমেন্ট এর জন্য একের অধিক স্টাইল ব্যবহার করা হলে কোন স্টাইলটি ব্যবহৃত হবে?
সাধারণভাবে বলা যায়, নিম্নোক্ত নিয়ম অনুসরণ করে সকল স্টাইল একটি নতুন ভার্চুয়্যাল স্টাইল শীটের মধ্যে ক্যাসকেড করবে যেখানে তৃতীয় নিয়মটি সর্বোচ্চ গুরুত্ব পাবে:
- বহিস্থিত এবং অন্তস্থিত স্টাইল শীট (হেড সেকশনের মাঝে)
- ইনলাইন স্টাইল (এইচটিএমএল এলিমেন্ট এর ভিতরে)
সুতরাং, একটি ইনলাইন স্টাইল (এইচটিএমএল এলিমেন্ট এর ভিতরে) সর্বোচ্চ গুরুত্ব পাবে, যার মানে হচ্ছে <head> ট্যাগ বা বহিস্থিত স্টাইল শীট বা ব্রাউজার এ নির্ধারিত মান এর মান ধারণকারী।
নোটঃ যদি বহিস্তিত স্টাইল শীট এর লিঙ্ক অন্তস্থিত স্টাইল শীট এর এইচটিএমএল <head> এর নিচে অবস্থান করে, তাহলে বহিস্তিত স্টাইল শীট অন্তস্থিত স্টাইল শীটকে ওভাররাইড করবে।
নিজে নিজে চেষ্টা করো
অনুশীলন ০১ঃ
“mystyle.css” নামক বহিস্থিত স্টাইল শীট যোগ করো
<!DOCTYPE html> <html> <head> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
অনুশীলন ০২ঃ
অন্তস্থিত স্টাইল শীট ব্যবহার করে পেজ এর “background-color: linen” নির্ধারণ করোঃ
<!DOCTYPE html> <html> <head> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
অনুশীলন ০৩ঃ
ইনলাইন স্টাইল শীট ব্যবহার করে পেজ এর “background-color: linen” নির্ধারণ করোঃ
<!DOCTYPE html> <html> <head> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
অনুশীলন ০৪ঃ
বহিস্থিত স্টাইল শীট “mystyle.css” ব্যতীত সকল স্টাইল মুছে ফেলঃ
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
p {
color: red;
}
</style>
</head>
<body style="background-color: lightcyan">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>