কিভাবে CSS তৈরি করা যায়

কিভাবে স্টাইলশীট যুক্ত করা যায়

যখন একটি স্টাইলশীট পড়া হয়, ব্রাউজার তার অনুযায়ী HTML ডকুমেন্টকে ফরম্যাট করবে। স্টাইলশীটটি যুক্ত করার পদ্ধতি তিনটি রয়েছে:

বাহ্যিক স্টাইলশীট

যখন স্টাইলটি অনেক পাতায় প্রয়োগ করতে হয়, তখন বাহ্যিক স্টাইলশীট হবে পছন্দ করা পদ্ধতি। বাহ্যিক স্টাইলশীট ব্যবহার করার ক্ষেত্রে, আপনি একটি ফাইলকে পরিবর্তন করে সমগ্র সাইটের অনুভূতি পরিবর্তন করতে পারেন। প্রত্যেক পাতা <link> ট্যাগটি স্টাইলশীটের সাথে যুক্ত করা হয়।<link> ট্যাগটি (ডকুমেন্টের) হেডিংয়ে যুক্ত হয়:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

ব্রাউজার ফাইল mystyle.css-এর থেকে স্টাইল ডিক্লেয়ারেশন পড়বে এবং তার অনুযায়ী ডকুমেন্টটির ফরম্যাটিং করবে。

বাহ্যিক স্টাইলশীটকে কোনও টেক্সট এডিটরে সম্পাদন করা যায়। ফাইলটিতে কোনও এইচটিএমএল ট্যাগ থাকবে না। স্টাইলশীটটি .css এক্সটেনশনে সংরক্ষণ করা উচিত। একটি স্টাইলশীট ফাইলের উদাহরণ এখানে দেওয়া হল:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

এট্রিবিউটের মান এবং ইউনিটের মধ্যে খালি জায়গা রাখবেন না। যদি আপনি "margin-left: 20 px" বর্তমানে "margin-left: 20px" ব্যবহার করেন, তবে এটি শুধুমাত্র IE 6-এবং মোজিলা/ফায়ারফক্স বা নেটস্কেপেই কার্যকর হবে, না তবে অন্য সব ব্রাউজারে।

ইনলাইন স্টাইলশীট

যখন একটি সমস্ত ডকুমেন্টকে বিশেষ স্টাইল প্রয়োগ করতে হয়, তখন ইনলাইন স্টাইলশীটকে ব্যবহার করা উচিত। আপনি <style> ট্যাগটি ডকুমেন্টের হেডিংয়ের মধ্যে ইনলাইন স্টাইলশীট নির্ধারণ করতে পারেন, এভাবে:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

ইনলাইন স্টাইল

প্রদর্শন এবং বিষয়কে মিশ্রিত করার কারণে, ইনলাইন স্টাইলগুলি স্টাইলশীটের অনেক সুবিধা হারায়। এই পদ্ধতিকে সার্বদা সতর্কতার সাথে ব্যবহার করুন, যেমন স্টাইলটি শুধুমাত্র একটি ইলেকট্রনম উপর যেন আপনাকে প্রয়োগ করতে হবে。

ইনলাইন স্টাইল ব্যবহার করতে, আপনাকে সংশ্লিষ্ট ট্যাগের মধ্যে স্টাইল (style) এট্রিবিউট ব্যবহার করতে হবে। স্টাইল এট্রিবিউটটি কোনও সিএসএস এট্রিবিউট ধারণ করতে পারে। এই উদাহরণে দেখানো হল কিভাবে শুরুতে অনুচ্ছেদের রঙ এবং বাম বাহির মার্গ পরিবর্তন করা যায়:

<p> style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

বহুস্তরীয় স্টাইল

যদি কোনও বৈশিষ্ট্য একাধিক স্টাইলশিপের একই বাছাইকারীর মাধ্যমে নির্দিষ্ট হয়, তবে বৈশিষ্ট্যের মান hসবচেয়ে বিস্তৃত স্টাইলশিপ থেকে উত্তরসূরি হবে。

উদাহরণস্বরূপ, বাহ্যিক স্টাইলশিপে h3 বাছাইকারীর তিনটি বৈশিষ্ট্য আছে:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

আর বাহ্যিক স্টাইলশিপে h3 বাছাইকারীর দুটি বৈশিষ্ট্য আছে:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

যদি এই পাতায় বাহ্যিক স্টাইলশিপ এবং বাহ্যিক স্টাইলশিপ সহ সংযুক্ত থাকে, তবে h3-এর শৈলী হবে:

color: red; 
text-align: right; 
font-size: 20pt;

যেহেতু বাহ্যিক স্টাইলশিপের বাইরে এই পাঠ্যটি উত্তরসূরি হয়, তাই রঙ বৈশিষ্ট্যটি (color) বাহ্যিক স্টাইলশিপের মধ্যে উত্তরসূরি হবে, কিন্তু লেখার সাজ-সজ্জা (text-alignment) এবং ফন্ট মাপ (font-size) বাহ্যিক স্টাইলশিপের শেষ পদক্ষেপকে প্রতিস্থাপন করবে।