কিভাবে CSS যোগ করে - কিভাবে কোড

যখন কোনও ব্রাউজার স্টাইল শীট পড়ে, তখন এটি স্টাইল শীটের তথ্য অনুসারে এইচটিএমএল ডকুমেন্টকে বিন্যাস করে। এখানে আমরা শিখবো কিভাবে ওয়েব পেজে CSS যোগ করে

তিন ভাবে ওয়েব পেজে CSS যোগ করে

স্টাইল শিট/ সিএসএস স্টাইল সন্নিবেশ করার জন্য তিনটি উপায় রয়েছে

External CSS
Internal CSS
Inline CSS

External CSS বা বাহ্যিক সিএসএস

একটি বাহ্যিক স্টাইল শীট দিয়ে, আপনি কেবল একটি ফাইল পরিবর্তন করে পুরো ওয়েবসাইটের চেহারা পরিবর্তন করতে পারেন!

প্রতিটি এইচটিএমএল পেজের হেড সেকসন এ <link> এলিমেন্ট এর ভেরতে external CSS file যোগ করতে হয়।

উদাহরন

HTML পেজে এক্সটার্নাল স্টাইল শীট কে <link> এলিমেন্ট এর মধ্যে ডিফাইন করা হয় এবং একি <head> এলিমন্ট এর ভেতরে থাকে ।

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1>

<p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p>

</body>

</html>

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1> <p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p> </body> </html>

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1>
<p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p>

</body>
</html>

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

এক্সটার্নাল / বাহ্যিক স্টাইল শিটটি যে কোনও টেক্টট এডিটর এ লেখা যেতে পারে এবং ফাইল এক্সটেনশন .css দিয়ে সেভ করে নিতে হয়।

এক্সটার্নাল স্টাইল শিটে (যার ফাইল এক্সটেনশন .css ) কোনো এইচটিএমএল কোড থাকবেনা ।

নিচে styles.css ফাইলের কোড গুলো কেমন হতে পারে তার একটি উদাহরন

body {

background-color: lightblue;

}

h1 {

color: navy;

margin-left: 20px;

}

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

body {
  background-color: lightblue;
}

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

নোট : সিএসএস প্রপার্টি ভেলু এবং এর ইউনিট এর মাঝে কোন ফাকা স্পেস রাখা যাবেনা ( যেমন margin-left: 20 px;), এর সঠিক দিক টি হলো margin-left: 20px;

Internal CSS – ইন্টারনাল সিএসএস

একটি সিংগেল এলিমেন্ট এর জন্য Internal CSS style ব্যবহার করা যেতে পারে ।

Internal CSS style <style> ট্যাগ এর মধ্যে ডিফাইন করা হয় এবং এটি সাধারনত ওয়েব পেজের <head> সেকশন এ থাকে।

নিচের উদাহরন টি দেখুন

<!DOCTYPE html>

<html>

<head>

<title>Internal CSS</title>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph to check Internal CSS activity.</p>

</body>

</html>

<!DOCTYPE html> <html> <head> <title>Internal CSS</title> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph to check Internal CSS activity.</p> </body> </html>

<!DOCTYPE html>
<html>
 <head>
 	<title>Internal CSS</title>
 	<style>
 		body {background-color: powderblue;}
 		h1   {color: blue;}
 		p    {color: red;}
 	</style>
 </head>
 <body>

 	<h1>This is a heading</h1>
 	<p>This is a paragraph.</p>
 	<p>This is another paragraph to check Internal CSS activity.</p>

 </body>
</html>

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

Internal CSS এ একাধিক সিলেক্টর এর জন্য আলাদা আলাদা সিএসএস কোড লোখা যায় এক্সটার্নাল স্টাইল সিটের মতোই, তবে এটি শুধু সেই পেজেই কাজ করে ।

Inline CSS – ইনলাইন সিএসএস

একটি সিংগেল এলিমেন্ট এর জন্য Inline CSS style ব্যবহার করা যেতে পারে। এটি এইচটিএমএল এলিমেন্টের সাথে থাকে style এট্রিবিউট ব্যবহার করে লেখা হয় ।

Inline styles ব্যবহার করার জন্য যে এইচটিএমএল এলিমেন্ট এ ইনলাইন স্টাইল লিখবেন সেটির সাথে style attribute যোগ করে সেখানে CSS Property গুলো লেখা হয় ।

নিচের উদাহরন টি দেখুন

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>

</html>

<!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body> </html>

<!DOCTYPE html>
<html>
  <body>

    <h1 style="color:blue;text-align:center;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>

  </body>
</html>

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

ইনলাইন সিএসএস ব্যবহার করলে সিএসএস এর অনেক সুবিধাই পাওয়া যায়না ! এই পদ্ধতিটি যতটা সম্ভব অল্প ব্যবহার করুন

কোন সিএসএস আগে কাজ করবে ?

আমরা তো উপরে তিন প্রকারের সিএসএস লেখার ধরন সম্পর্কে ধারনা পেলাম, কিন্তু কোনটা আগে কাজ করবে এ নিয়ে একটা সমস্যা তৈরি হয় নতুন দের মাঝে। চলুন ধারনা নেয়া যাক,

ধরুন একটি এক্সটার্নাল স্টাইল শীটে নিচের সিএসএস স্টাইল টি আছে যা h1 এলিমেন্টের জন্য লেখা ।

h1 {

color: navy;

}

h1 { color: navy; }

h1 {
  color: navy;
}

আবার যে পেজে উপরের এক্সটার্নাল স্টাইল টি যুক্ত হয়েছে, সেটিতেই h1 এলিমেন্টের জন্য লেখা ইন্টারনাল সিএসএস আছে নিচের মতো

h1 {

color: orange;

}

h1 { color: orange; }

h1 {
  color: orange;   
}

তাহলে নিচের কোড টি অর্থাৎ color: orange; কাজ করবে । নিচের উদাহরন টি দেখুন,

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color:orange;

}

</style>

</head>

<body>

<h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1>

<p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p>

</body>

</html>

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> <style> h1 { color:orange; } </style> </head> <body> <h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1> <p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p> </body> </html>

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    h1 {
      color:orange;
    }
  </style>
</head>
<body>

  <h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1>
  <p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p> 

</body>
</html>

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

নোট : উপরের কোড টিতে খেয়ার করুন <link .. > এলিমেন্ট টি <style> এলিমেন্টের আগে আছে । তো পরে যেই সিএসএস থাকে, সেটি আগের সিএসএস রুল কে ওভার রাইট করে ।

উপরের কোড ব্লকটিতে শুধু <link .. > এলিমেন্ট টি <style> এলিমেন্টের নিচে নিলে এক্সটার্নাল স্টাইল টি কাজ করবে ।

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color:orange;

}

</style>

</head>

<body>

<h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1>

<p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p>

</body>

</html>

<!DOCTYPE html> <html> <head> <style> h1 { color:orange; } </style> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1> <p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p> </body> </html>

<!DOCTYPE html>
<html>
<head> 
  <style>
    h1 {
      color:orange;
    }
  </style>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1>
  <p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p> 

</body>
</html>

আর ইনলাইন স্টাইল সাধারন ভাবে এক্সটার্নাল কিংবা ইন্টারনাল সিএসএস কো ওভার রাইট করে ।

নিচের উদাহরন টি দেখুন

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color:orange;

}

</style>

</head>

<body>

<h1 style="color:red" >এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1>

<p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p>

</body>

</html>

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> <style> h1 { color:orange; } </style> </head> <body> <h1 style="color:red" >এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1> <p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p> </body> </html>

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    h1 {
      color:orange;
    }
  </style>
</head>
<body>

  <h1 style="color:red" >এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1>
  <p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p> 

</body>
</html>

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

ক্যাসকেডিং অর্ডার

এইচটিএমএল উপাদানের জন্য একাধিক স্টাইল নির্দিষ্ট করা থাকলে কোন স্টাইল কাজ করবে ?

একই পেজে একাধিক ধরনের স্টাইল থাকলে সেগুলো নিচের অর্ডার মতো কাজ করবে যেখানে ১ নাম্বার এর প্রায়রিটি সবচেয়ে বেশি এবং ৩ নাম্বার এর কম ।

Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default

নোট : প্রতিটি ওয়েব ব্রাউজার এর ই ডিফল্ট স্টাইল থাকে যা এইচটিএমএল পেজে কোন সিএসএস ব্যবহার না করলে অটো কাজ করে ।

তিন ভাবে ওয়েব পেজে CSS যোগ করে

External CSS বা বাহ্যিক সিএসএস

Internal CSS – ইন্টারনাল সিএসএস

Inline CSS – ইনলাইন সিএসএস

কোন সিএসএস আগে কাজ করবে ?

ক্যাসকেডিং অর্ডার

কমেন্ট করুন Cancel reply