স্টাইলশীট ব্যবহার করার পদ্ধতি

এখন আমি স্টাইলশীট ব্যবহার করার পদ্ধতি নিয়ে আলোচনা করবো । সিএসএস এর স্টাইলশীট এইচটিএমএল এ ব্যবহার করার জন্য তিনটি পদ্ধতি রয়েছে । এ তিনটি পদ্ধতি হচ্ছেঃ

  • ইন্টারনাল স্টাইলশীট
  • এক্সটারনাল স্টাইলশীট
  • ইনলাইন স্টাইলশীট

এসব পদ্ধতিতে মূলত এইচটিএমএল ডকুমেন্ট এর সাথে সিএসএস এর মাধ্যমে তৈরিকৃত স্টাইলশীট জুড়ে দেওয়া হয় । এখন আমরা এসব পদ্ধতি নিয়ে বিস্তারিত আলোচনা করবো;

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

এইচটিএমএল এ যখন (<head>…</head>) এর ভিতরে (<style>…</style>) ট্যাগ এর মাধ্যমে সিএসএস স্টাইল ব্যবহার করা হয় সেটা হচ্ছে ইন্টারনাল স্টাইলশীট । এই পদ্ধতিতে এইচটিএমএল & সিএসএস কোডসমূহ একই সাথে থাকে । অর্থাৎ, সিএসএস এর জন্য আলাদা কোন ফাইল ব্যবহার করা হয় না । আরও ভালোভাবে বুঝতে নিচের কোডটুকু লক্ষ্য করুনঃ

<html>
<head>
<title> This is Example of Internal Stylesheet </title>
<style>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p> CSS Stands for Cascading Style Sheets </p>
</body>
</html>

উপরের কোডটুকু একটি নোটপ্যাড এ লিখে Internal.html লিখে সেভ করে যেকোনো একটি ব্রাউজারে ফাইলটি প্রদর্শন করুন ।

এক্সটারনাল স্টাইলশীট

এক্সটারনাল স্টাইলশীট পদ্ধতিতে এইচটিএমএল & সিএসএস কোডসমূহ আলাদা থাকে । এই পদ্ধতিতে সিএসএস ফাইল আলাদা তৈরি করা হয় । অতঃপর (<head>…</head>) এর ভিতরে (<link/>) ট্যাগ এর মাধ্যমে এইচটিএমএল এ সিএসএস স্টাইলশীট জুড়ে দেওয়া হয় । আরও ভালোভাবে বুঝতে নিচের কোডটুকু লক্ষ্য করুনঃ

প্রথমে আমাদের একটা সিএসএস ফাইল তৈরি করতে হবে । এজন্য নিচের কোডটুকু লিখে slyle.css নামে সেভ করুন;

body{ background-color: black;}
p { color: red; }

এবার আমরা সিএসএস এর মাধ্যমে যে স্টাইলশীট তৈরি করলাম তা এইচটিএমএল ফাইলের সাথে যুক্ত করবো । এজন্য আমাদের একটি এইচটিএমএল ফাইল তৈরি করতে হবে । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<html>
<head>
<title> This is Example of External Stylesheet </title>
<link  href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p> CSS Stands for Cascading Style Sheets </p>
</body>
</html>

এবার সেভ করা এইচটিএমএল ফাইলটি যেকোনো একটি ব্রাউজারে ফাইলটি প্রদর্শন করুন ।

*ওয়েবসাইট প্রস্তুত করার জন্য এক্সটারনাল স্টাইলশীট ব্যবহার করাই শ্রেয় । এতে, সাইটের ডিজাইন নিয়ন্ত্রন করতে সুবিধা হয় ।

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

ইনলাইন স্টাইলশীট পদ্ধতিতে এইচটিএমএল ট্যাগের সাথে (<style>….</style>) অ্যাট্রিবিউটের মাধ্যমে ডিজাইন নির্ধারণ করা হয় । এই পদ্ধতিতে এইচটিএমএল এর প্রতিটি ট্যাগের সাথে স্টাইল নির্ধারণ করা হয় । ইনলাইন স্টাইলশীট এর ক্ষেত্রে দ্বিতীয় বন্ধনী এর পরিবর্তে উদ্ধতি চিহ্ন (“”) ব্যবহার করা হয় ।

আরও ভালোভাবে বুঝতে নিচের কোডগুলো লক্ষ্য করুনঃ

<html>
<head>
<title> This is Example of Internal Stylesheet </title>
</head>
<body>
<p style="background: black; color: red;"> CSS Stands for Cascading Style Sheets </p>
</body>
</html>

*অন্যান্য স্টাইলশীট অপেক্ষা ইনলাইন স্টাইলশীট বেশি শক্তিশালী । এইচটিএমএল এ অন্যান্য পদ্ধতিতে স্টাইলশীট (ইন্টারনাল, এক্সটারনাল) প্রয়োগ করা থাকলেও সেখানে ইনলাইন স্টাইলশীট ব্যবহার করলে ইনলাইন স্টাইলশীট-ই প্রয়োগ হবে । অর্থাৎ, ইনলাইন স্টাইলশীট অন্যান্য স্টাইলশীটকে অভাররাইট (Override) করতে পারে । তবে, এটা বেশি ব্যবহার করা উচিত নয় । বিশেষক্ষেত্রে, এ স্টাইলশীট ব্যবহার করা যেতে পারে ।

Series Navigation<< সিএসএস সিলেক্টরসিএসএস ব্যাকগ্রাউন্ড (CSS Background) >>

Leave a Reply

Your email address will not be published. Required fields are marked *