X

X

X

CSS ব্যবহারের পদ্ধতি


যখন ব্রাউজারে কোনো স্টাইলশিট লোড হয়, তখন ব্রাউজার এর বর্ণনা অনুযায়ী ওয়েবপেজটিকে প্রদর্শণ করে।


তিনটি উপায়ে ওয়েবপেজে CSS ব্যবহার বা লোড করা যায়।

এগুলো হলো:

  • বাহ্যিক CSS ব্যবহার করে
  • অভ্যন্তরীন CSS ব্যবহার করে
  • লাইন বা ইলামেন্ট ভিত্তিক CSS ব্যবহার করে

বাহ্যিক CSS

বাহ্যিক সিএসএস ব্যবহার করে একটি ফাইল দিয়ে পুরো ওয়েবসাইট ডিজাইন করা যায়। তবে প্রতিটি পেজকে পৃথক পৃথকভাবে স্টাইলশিটটিকে লোড করতে হবে। এটি করা হয় নিচের উপায়ে। উদাহরণটি দেখুন তাহলে বিষয়টি পরিষ্কার হবে।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


যেকোনো টেক্সট এডিটর ব্যবহার করে সিএসএস ফাইল লিখা যায়। এতে কোনো HTML ট্যাগ লিখা যাবে না এবং অবশ্যই ফাইলটিকে .css এক্সটেনশন দিয়ে সংরক্ষণ (Save) করতে হবে।

নিচের উদাহরণে “mystyle.css” নামে একটি ফাইলের সোর্সকোড দেখানো হলো:

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

বি:দ্র: Property value এবং এর একক এর মধ্যে কোনো স্পেস বা ফাঁকা জায়গা রাখা যাবে না। যেমন,  margin-left: 20 px;) , এটি ভুল পদ্ধতি। লক্ষ্য করুন এটিতে Property value এবং এককের মধ্যে একটি স্পেস আছে। সঠিক পদ্ধতি হচ্ছে: margin-left: 20px;


অভ্যন্তরীণ সিএসএস

যদি কোনো স্টাইলশিট শুধুমাত্র একটি পেজের জন্য প্রয়োজন হয়, তবে অভ্যন্তরীন সিএসএস ব্যবহার করা উচিৎ। এতে একটি HTTP request কম ব্যবহার হবে। পেজ লোডের গতি বাড়বে। অভ্যন্তরীণ (Internal) সিএসএস-কে <style> ইলামেন্টের ভিতর ব্যবহার করতে হবে। যদিও <style> ইলামেন্টকে পেজের যেকোনো জায়গায় ব্যবহার করা যায়, কিন্তু আদর্শমানের পদ্ধতি হচ্ছে <style> ইলামেন্টকে <head> ইলামেন্টের ভেতর লিখা।

Code Example

<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


লাইনভিত্তিক সিএসএস

An inline style may be used to apply a unique style for a single element.
যদি কোনো স্টাইল শুধুমাত্র একটি ইলামেন্টের জন্য প্রযোজ্য হয়, তবে লাইনভিত্তিক (Inline ) সিএসএস ব্যবহার করা যায়। এজন্য ইলামেন্টের style attribute -এ সিএসএস কোড লিখতে হবে। লাইনভিত্তিক সিএসএস-এ যেকোনো সিএসএস কোড লিখা যায়।

নিচের উদাহরণে দেখানো হলো কিভাবে একটি ইলামেন্টের রং ও বাম পাশের মার্জিন সেট করা যায়।

Code Example

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

টিপস : লাইনভিত্তিক সিএসএস ব্যবহার করার কিছু সমস্যা আছে। কাজেই যখন একান্তভাবে আপনার লাইনভিত্তিক সিএসএস ব্যবহার করার প্রয়োজন শুধুমাত্র তখনই এটি ব্যবহার করবেন।

একাধিক স্টাইল শিটের ব্যবহার

যখন একই ইলামেন্টর জন্য একই প্রপার্টি একাধিকবার সেট করা হয়, তবে যে প্রপার্টিটি শেষে ডিফাইন করা হবে সেটিই উক্ত ইলামেন্টের জন্য প্রযোজ্য হবে।

উদাহরণ

ধরুণ একটি বাহ্যিক স্টাইলশিটে <h1> ইলামেন্টের জন্য নিচের স্টাইল ডিফাইন করা হয়েছে।

h1 {
color: navy;
}

আবার, অভ্যন্তরীন সিএসএস এ <h1> ইলামেন্টের জন্য নিচের স্টাইল ডিফাইন করা হয়েছে:

h1 {
color: orange;
}

যদি অভ্যন্তরীন স্টাইলকে বাহ্যিক সিএসএস এর পরে লোড করা হয়, তবে অভ্যন্তরীণ সিএসএস প্রযোজ্য হবে। যদি উল্টো হয়, তবে বাহ্যিক সিএসএস প্রযোজ্য হবে।

নিচের উদাহরণে বাহ্যিক সিএসএস আগে লোড হয়েছে।

Code Example

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
    color: orange;
}
</style>
</head>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

এবং এই উদাহরণে অভ্যন্তরীন সিএসএস আগে লোড হয়েছে।

Code Example

<head>
<style>
h1 {
    color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বিভিন্ন সিএসএস এর গ্রহণযোগ্যতার ক্রম

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

  1. লাইনভিত্তিক বা Inline স্টাইল (HTML ইলামেন্টের ভেতরে লিখা হয়)
  2. বাহ্যিক এবং অভ্যন্তরীন স্টাইলশিট (হেড সেকশনের ভেতরে লিখা হয়)
  3. ব্রাউজারের ডিফল্ট স্টাইল

অর্থাৎ, লাইনভিত্তিক সিএসএস-এর গ্রহনযোগ্যতা সবচেয়ে বেশি।

নিজে নিজে চেষ্টা করুন »