ব্রাউজার যখন একটি স্টাইল শিট পড়ে, তখন এটি স্টাইল শিটের তথ্য অনুযায়ী HTML ডকুমেন্ট ফরম্যাট করবে।
একটি স্টাইল শিট যোগ করার তিনটি উপায় আছে:
একটি external স্টাইল শিট দিয়ে, শুধু একটি ফাইল পরিবর্তন করে আপনি পুরো ওয়েবসাইটের চেহারা পরিবর্তন করতে পারেন!
প্রতিটি পেজে <link> এলিমেন্টের ভেতরে external স্টাইল শিট ফাইলের একটি রেফারেন্স থাকতে হবে।
External স্টাইল একটি HTML পেজের <head> সেকশনের ভেতরে, <link> এলিমেন্টে নির্ধারণ করা হয়:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>একটি external স্টাইল শিট যেকোনো টেক্সট এডিটরে লেখা যায়। ফাইলে কোনো HTML ট্যাগ থাকা উচিত নয়। স্টাইল শিট ফাইল অবশ্যই .css এক্সটেনশন দিয়ে সংরক্ষণ করতে হবে।
"mystyle.css" ফাইলটি দেখতে এমন হয়:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}মনে রাখবেন: প্রপার্টির মান এবং ইউনিটের মধ্যে স্পেস যোগ করবেন না (যেমন margin-left: 20 px;)। সঠিক উপায় হলো: margin-left: 20px;
একটি একক পেজের ইউনিক স্টাইল থাকলে একটি internal স্টাইল শিট ব্যবহার করা যেতে পারে।
Internal স্টাইল একটি HTML পেজের <head> সেকশনের ভেতরে, <style> এলিমেন্টে নির্ধারণ করা হয়:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>একটি একক এলিমেন্টে ইউনিক স্টাইল প্রয়োগ করতে একটি inline স্টাইল ব্যবহার করা যেতে পারে।
inline স্টাইল ব্যবহার করতে, সংশ্লিষ্ট এলিমেন্টে style অ্যাট্রিবিউট যোগ করুন। style অ্যাট্রিবিউটে যেকোনো CSS প্রপার্টি থাকতে পারে।
Inline স্টাইল সংশ্লিষ্ট এলিমেন্টের "style" অ্যাট্রিবিউটের ভেতরে নির্ধারণ করা হয়:
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>টিপস: একটি inline স্টাইল স্টাইল শিটের অনেক সুবিধা হারায় (কনটেন্টকে প্রেজেন্টেশনের সাথে মিশিয়ে দিয়ে)। এই পদ্ধতি খুব কম ব্যবহার করুন।
একই সিলেক্টরের (এলিমেন্ট) জন্য বিভিন্ন স্টাইল শিটে কিছু প্রপার্টি নির্ধারণ করা থাকলে, সর্বশেষ পড়া স্টাইল শিটের মান ব্যবহার করা হবে।
ধরে নিন একটি external স্টাইল শিটে <h1> এলিমেন্টের জন্য নিচের স্টাইল আছে:
h1 {
color: navy;
}এরপর, ধরে নিন একটি internal স্টাইল শিটেও <h1> এলিমেন্টের জন্য নিচের স্টাইল আছে:
h1 {
color: orange;
}internal স্টাইলটি external স্টাইল শিটের লিঙ্কের পরে নির্ধারণ করা থাকলে, <h1> এলিমেন্ট "orange" হবে:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>তবে, internal স্টাইলটি external স্টাইল শিটের লিঙ্কের আগে নির্ধারণ করা থাকলে, <h1> এলিমেন্ট "navy" হবে:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>একটি HTML এলিমেন্টের জন্য একাধিক স্টাইল নির্ধারিত থাকলে কোন স্টাইলটি ব্যবহার করা হবে?
একটি পেজের সব স্টাইল নিচের নিয়ম অনুযায়ী একটি নতুন "ভার্চুয়াল" স্টাইল শিটে "ক্যাসকেড" হবে, যেখানে নম্বর এক-এর অগ্রাধিকার সবচেয়ে বেশি:
তাই, একটি inline স্টাইলের অগ্রাধিকার সবচেয়ে বেশি, এবং এটি external ও internal স্টাইল এবং ব্রাউজারের ডিফল্টকে ওভাররাইড করবে।