HTML এ CSS লেখা (CSS in HTML)

তিনভাবে আপনি CSS লিখতে পারেন:

  • ১. Inline CSS
  • ২. Style ট্যাগ এর ভেতরে css
  • ৩. External file এ css

এই তিনটি উপায় উদাহরণসহ ব্যাখা করা হল।

Inline CSS:

এ অংশে আমরা সবচেয়ে সহজ উপায় CSS লেখা দেখব এবং সেটি হল: Inline এ কিভাবে CSS লিখব, আগে লিখে ফেলি তারপর ব্যাখ্যা করছি:

ফলাফল

উপরের উদাহরণে h1 ট্যাগ এর ভেতরে স্টাইল নামে একটি Attribute এর মান লিখা হয়েছে:

“color: red;”

এটার মানে হলো h1 এর font এর color লাল (red) করবে। এখানে color হল CSS property এবং red হল সেই property এর value।

অর্থাৎ style=” এখানে যা থাকে তা হল”

CSS property: value;

যেমন: background-color হল আরেকটি CSS property। তাই আপনি কোন HTML Element এর background-color সবুজ (green) করতে চাইলে লিখবেন:

style=”background-color: green”

উপরের উদাহরণে style টি h1 এর ভেতরে এক লাইনে লেখা হয়েছে তাই এটিকে inline css বল।

আরো একটি তথ্য দিয়ে রাখি, css property টা case-insensitive অর্থাৎ background-color বা Background-Color লিখলেও কাজ করবে। তবে আপনারা সব সময় ছোট হাতের অক্ষর এ লিখবেন তা না হলে কিছু Browser এ সমস্যা হতে পারে।

Style ট্যাগ এর ভিতরে CSS লিখা

উপরের উদাহরণে inline এ যেই css লিখেছেন সেটি যদি style ট্যাগের ভেতর লিখতে চান তাহলে নিচের মত লিখতে হবেঃ

<style>
h1{ color: red;}
</style>

তখন এই অংশটি HTML এর head অংশে যোগ করে দিন

ফলাফল

লক্ষ করুন, যে HTML Element এর উপর css করবেন সেটি শুরুতে লিখতে হবে।এখন ‘{ }’ এর ভেতর style এর attribute তারপর কোলন (:) তারপর style এর value এবং সবশেষে সেমিকোলন (;) দিতে হবে। যেমন p ট্যাগের ভেতরে যে লিখা থাকবে সেটির কালার যদি গ্রীন করতে হয় তাহলে নিচের মত লিখতে হবে

p{
   color:green;
}

External ফাইল এ css লেখা

কোড সুন্দর রাখতে css গুলো আলাদা করে একটি ফাইলে রাখা হয়। যে ফাইলে css লেখা হয় সেটি শেষে css এক্সটেনশন থাকে। কিভাবে ফাইল এর এক্সটেনশন লিখতে হয় সেটি জানা না থাকলে এই লেখাটি পড়ে আসুন। এখন এই css ফাইলটি কে আপনার HTML ফাইলে যুক্ত করে দিন। ঝামেলা মনে হচ্ছে? একটা উদাহরণ দিয়ে ব্যাখ্যা করছি। মনে করুন যেখানে html ফাইল টি আছে সেখানে আপনি style.css নামে একটি ফাইল খুললেন এবং নিচের css কোড লিখলেন

h2{
color:orange;
}

লক্ষ্য করুন css ফাইলে css লিখতে style ট্যাগ ব্যবহার করতে হয় না। এখন style.css ফাইলটি আপনার HTML এ যুক্ত করতে head এর মাঝে নিচের লাইনটি লিখে দিন:

<link rel=”stylesheet” href=”style.css”>

আমার style.css ফাইলটি অন্য একটি জায়গায় আছে তাই, href=”style.css” না লিখে href=”/style.css” লিখা হয়েছে।

সম্পূর্ণ কোডটি দেখতে নিচের মতঃ

ফলাফল

আমার style.css ফাইলটি দেখতে এখানে ক্লিক করুন।

href এর ভেতরে ফাইলের লিংকটি দেওয়া থাকে। এই লিংকটি কিভাবে পরিবর্তিত হয় তা নিয়ে এডভান্স CSS অংশে আলোচনা করব। আপনি অনুশীলন করার জন্য যেইখানে HTML ফাইলটি আছে সেইখানে style.css ফাইলটি রাখুন এবং head এর মাঝে নিচের লাইনটি লিখে দিন:

<link rel="stylesheet" href="style.css">