যখন কোনও ব্রাউজার স্টাইল শীট পড়ে, তখন এটি স্টাইল শীটের তথ্য অনুসারে এইচটিএমএল ডকুমেন্টকে বিন্যাস করে। এখানে আমরা শিখবো কিভাবে ওয়েব পেজে CSS যোগ করে
তিন ভাবে ওয়েব পেজে CSS যোগ করে
স্টাইল শিট/ সিএসএস স্টাইল সন্নিবেশ করার জন্য তিনটি উপায় রয়েছে
- External CSS
- Internal CSS
- Inline CSS
External CSS বা বাহ্যিক সিএসএস
একটি বাহ্যিক স্টাইল শীট দিয়ে, আপনি কেবল একটি ফাইল পরিবর্তন করে পুরো ওয়েবসাইটের চেহারা পরিবর্তন করতে পারেন!
প্রতিটি এইচটিএমএল পেজের হেড সেকসন এ <link> এলিমেন্ট এর ভেরতে external CSS file যোগ করতে হয়।
উদাহরন
HTML পেজে এক্সটার্নাল স্টাইল শীট কে <link> এলিমেন্ট এর মধ্যে ডিফাইন করা হয় এবং একি <head> এলিমন্ট এর ভেতরে থাকে ।
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1> <p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p> </body> </html>
এক্সটার্নাল / বাহ্যিক স্টাইল শিটটি যে কোনও টেক্টট এডিটর এ লেখা যেতে পারে এবং ফাইল এক্সটেনশন .css দিয়ে সেভ করে নিতে হয়।
এক্সটার্নাল স্টাইল শিটে (যার ফাইল এক্সটেনশন .css ) কোনো এইচটিএমএল কোড থাকবেনা ।
নিচে styles.css ফাইলের কোড গুলো কেমন হতে পারে তার একটি উদাহরন
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}নোট : সিএসএস প্রপার্টি ভেলু এবং এর ইউনিট এর মাঝে কোন ফাকা স্পেস রাখা যাবেনা ( যেমন margin-left: 20 px;), এর সঠিক দিক টি হলো margin-left: 20px;
Internal CSS – ইন্টারনাল সিএসএস
একটি সিংগেল এলিমেন্ট এর জন্য Internal CSS style ব্যবহার করা যেতে পারে ।
Internal CSS style <style> ট্যাগ এর মধ্যে ডিফাইন করা হয় এবং এটি সাধারনত ওয়েব পেজের <head> সেকশন এ থাকে।
নিচের উদাহরন টি দেখুন
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph to check Internal CSS activity.</p>
</body>
</html>Internal CSS এ একাধিক সিলেক্টর এর জন্য আলাদা আলাদা সিএসএস কোড লোখা যায় এক্সটার্নাল স্টাইল সিটের মতোই, তবে এটি শুধু সেই পেজেই কাজ করে ।
Inline CSS – ইনলাইন সিএসএস
একটি সিংগেল এলিমেন্ট এর জন্য Inline CSS style ব্যবহার করা যেতে পারে। এটি এইচটিএমএল এলিমেন্টের সাথে থাকে style এট্রিবিউট ব্যবহার করে লেখা হয় ।
Inline styles ব্যবহার করার জন্য যে এইচটিএমএল এলিমেন্ট এ ইনলাইন স্টাইল লিখবেন সেটির সাথে style attribute যোগ করে সেখানে CSS Property গুলো লেখা হয় ।
নিচের উদাহরন টি দেখুন
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>ইনলাইন সিএসএস ব্যবহার করলে সিএসএস এর অনেক সুবিধাই পাওয়া যায়না ! এই পদ্ধতিটি যতটা সম্ভব অল্প ব্যবহার করুন
কোন সিএসএস আগে কাজ করবে ?
আমরা তো উপরে তিন প্রকারের সিএসএস লেখার ধরন সম্পর্কে ধারনা পেলাম, কিন্তু কোনটা আগে কাজ করবে এ নিয়ে একটা সমস্যা তৈরি হয় নতুন দের মাঝে। চলুন ধারনা নেয়া যাক,
ধরুন একটি এক্সটার্নাল স্টাইল শীটে নিচের সিএসএস স্টাইল টি আছে যা h1 এলিমেন্টের জন্য লেখা ।
h1 {
color: navy;
}আবার যে পেজে উপরের এক্সটার্নাল স্টাইল টি যুক্ত হয়েছে, সেটিতেই h1 এলিমেন্টের জন্য লেখা ইন্টারনাল সিএসএস আছে নিচের মতো
h1 {
color: orange;
}তাহলে নিচের কোড টি অর্থাৎ color: orange; কাজ করবে । নিচের উদাহরন টি দেখুন,
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<style>
h1 {
color:orange;
}
</style>
</head>
<body>
<h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1>
<p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p>
</body>
</html>নোট : উপরের কোড টিতে খেয়ার করুন <link .. > এলিমেন্ট টি <style> এলিমেন্টের আগে আছে । তো পরে যেই সিএসএস থাকে, সেটি আগের সিএসএস রুল কে ওভার রাইট করে ।
উপরের কোড ব্লকটিতে শুধু <link .. > এলিমেন্ট টি <style> এলিমেন্টের নিচে নিলে এক্সটার্নাল স্টাইল টি কাজ করবে ।
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:orange;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1>
<p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p>
</body>
</html>আর ইনলাইন স্টাইল সাধারন ভাবে এক্সটার্নাল কিংবা ইন্টারনাল সিএসএস কো ওভার রাইট করে ।
নিচের উদাহরন টি দেখুন
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<style>
h1 {
color:orange;
}
</style>
</head>
<body>
<h1 style="color:red" >এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1>
<p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p>
</body>
</html>ক্যাসকেডিং অর্ডার
এইচটিএমএল উপাদানের জন্য একাধিক স্টাইল নির্দিষ্ট করা থাকলে কোন স্টাইল কাজ করবে ?
একই পেজে একাধিক ধরনের স্টাইল থাকলে সেগুলো নিচের অর্ডার মতো কাজ করবে যেখানে ১ নাম্বার এর প্রায়রিটি সবচেয়ে বেশি এবং ৩ নাম্বার এর কম ।
- Inline style (inside an HTML element)
- External and internal style sheets (in the head section)
- Browser default
নোট : প্রতিটি ওয়েব ব্রাউজার এর ই ডিফল্ট স্টাইল থাকে যা এইচটিএমএল পেজে কোন সিএসএস ব্যবহার না করলে অটো কাজ করে ।