সিএসএস ব্যবহার পদ্ধতি - Css Method Of Use


ওয়েব পেজে বিভিন্ন ভাবে সিএসএস স্টাইল কোড ব্যবহার করা যায়। বিভিন্ন পদ্ধতি বিভিন্ন ক্ষেত্রে ব্যবহার করা সুবিধাজনক।


সিএসএস ব্যবহার পদ্ধতি

৩ টি পদ্ধতিতে কোন ওয়েব পেজে সিএসএস স্টাইল কোড ব্যবহার করা যায়। এগুলো হল -


Inline সিএসএস

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

ইনলাইন স্টাইল ব্যবহার করার জন্য, যে এইচটিএমএল এলিমেন্টে স্টাইল করা হবে, ঐ ট্যাগের সাথে style এট্রিবিউট ব্যবহার করতে হয়। style এট্রিবিউট যে কোন সিএসএস প্রপার্টির সাথে ব্যবহার করা যায়।

style এট্রিবিউট ব্যবহার করে নিচে একটি উদাহরণ দেখুন।

উদাহরণ

<h2 style="color:teal;margin-left:30px;">This is a heading.</h2>
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>


কোড এডিটর



External সিএসএস

যখন একই স্টাইল কোড একাধিক ওয়েব পেজ বা এইচটিএমএল ডকুমেন্ট ব্যবহার করার প্রয়োজন হয় তখন এক্সটারনাল স্টাইল সীট পদ্ধতি ব্যবহার করাই উত্তম। প্রতিটি ওয়েব পেজেই অবশ্যই <link> ট্যাগের মাঝে href আত্ত্রিবুত ব্যবহার করে এক্সটারনাল স্টাইল সীট যুক্ত করে দিতে হয়। এক্ষেত্রে <link> ট্যাগটি অবশ্যই <head> . . . </head> ট্যাগ অর্থাৎ head সেকশনের মাঝে রাখতে হয়।

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<p>
webschool.com is a free bangla tuitorial website.
</p>
</body>

সিএসএস স্টাইল সীটে কোন এইচটিএমএল ট্যাগ থাকবে না। স্টাইল সীটকে একটি .css এক্সটেনশন যুক্ত "mystyle" নামে একটি file এ সংরক্ষণ বা save করা হয়েছে। ওপরের এইচটিএমএল কোডের জন্য নিচে mystyle.css স্টাইল সীটের নমুনা দেয়া হল -

উদাহরণ

body {
  background-color: gray;
  }

p {
  color: red;
  font-size: 20px;
  text-decoration: underline;
  }


কোড এডিটর


নোট - <link> ট্যাগ ব্যবহার করে স্টাইল সিটকে <body> ... </body> ট্যাগের মাঝে ব্যবহার করা হলেও বেশিরভাগ সিএসএস স্টাইল কোড কাজ করবে, কিন্তু তাও এভাবে ব্যবহার করা উচিৎ না।

নোট - সিএসএস প্রপার্টি গুলোর মান বা value এবং একক বা unit এর মাঝে কোন ফাকা স্থান বা space রাখবেন না, কারন তা ইন্টারনেট এক্সপ্লোরার এ সমর্থন করলেও ফায়ারফক্স বা অপেরা এর আগের সংস্করণে সমর্থন করে না।


Internal সিএসএস

যদি এক ধরনের স্টাইল শুধুমাত্র একটি ওয়েব পেজ বা এইচটিএমএল ডকুমেন্টে ব্যবহার করার জন্য প্রয়োজন হয় তবে সেক্ষেত্রে ইন্টারনাল স্টাইল পদ্ধতি ব্যবহার করাই উত্তম। ইন্টারনাল স্টাইল সীট প্রকাশ করা হয় এইচটিএমএল ডকুমেন্টের <head> ট্যাগের ভেতরে, <style> ট্যাগ ব্যবহার করে।

নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ

<head>
  <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}
  </style>
</head>


কোড এডিটর



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

একই ওয়েব পেজে একাধিক পদ্ধতিতে স্টাইল কোড ব্যবহার করা যায়। আবার একটি এইচটিএমএল ডকুমেন্টই একাধিক external স্টাইল সীট ব্যবহার করা যায়।

নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style>
    h1 {
       color: lime;
       }
    </style>
  </head>
  <body>
    <h1> This is a heading. </h1>
    <p> This is a paragraph. </p>
  </body>
</html>


কোড এডিটর