ধাপ
২

CSS কিভাবে HTML এ যুক্ত করতে হয়?

CSS কে HTML 4 এর সাথে চালু করা হয়।

মোট তিনটি নিয়মে HTML এর সাথে CSS যুক্ত করা যায়। সেগুলো হলঃ

লাইনের ভিতরে (Inline) - HTML এলিমেন্ট এ style এট্রিবিউট ব্যবহার করে।
অভ্যন্তরীণ (Internal) - <head> অংশে <style> এলিমেন্ট ব্যবহার করে।
বহিঃস্থ (Externel) - বহিঃস্থ কোনো CSS ডকুমেন্ট ফাইল যুক্ত করে।

CSS যুক্ত করার সবচেয়ে ভাল উপায় হল CSS কোডসমূহ বহিঃস্থ ফাইলে রাখা। অর্থাৎ তিন নং নিয়মটি।

লাইনের ভিতরে (Inline)

কোন একটি HTML এলিমেন্ট কে আলাদা রূপ দিতে এলিমেন্টের ভিতর style এট্রিবিউটে CSS কোড দেয়া হয়।

যেমন নিচের উদাহরনে একটি <p> এলিমেন্টের রং পরিবর্তন করা এবং বাম দিকে ২৫ পিক্সেল মার্জিন দেয়ার নিয়ম দেখানো হয়েছে।

প্রয়োগঃ

<p style="color: brown; margin-left: 25px;">This is a paragraph with inline style</p>

প্রিভিউঃ

Browser

This is a paragraph with inline style

অভ্যন্তরীণ (Internal)

ধরুন অনেক গুলো পেজ একই রকম দেখতে, এরকম ক্ষেত্রে সব গুলোর জন্য একটি CSS ফাইল তৈরি করা হল। কিন্তু কোনো একটি বিশেষ পেজের রূপ যদি অন্যান্য পাতা থেকে আলাদা হয়, তাহলেই এ পদ্ধতি ব্যবহার করা হয়। এ ক্ষেত্রে CSS কোডকে HTML ডকুমেন্টের <head> অংশে <style> এলিমেন্টের মাধ্যমে যুক্ত করা হয়। নিচের একটি উদাহারন দেয়া হলঃ

প্রয়োগঃ

<head>
	<style>
		body {
			background-color: yellow;
       }
		p {
        	color: pink;
       }
	</style>
</head>

<body>
	<p>Hello world!</p>
</body>

প্রিভিউঃ

Browser

Hello world!

বহিঃস্থ (External)

যখন একটি সম্পূর্ণ ওয়েব সাইটের প্রায় সব পেজে একই রূপ থাকে তখন এ নিয়মটি ব্যবহার করা হয়। এ পদ্ধতিতে একটি CSS ফাইল থাকে, যে ফাইলে শুধু CSS কোডই থাকে, এবং ফাইলটি <link> ট্যাগ দ্বারা HTML ডকুমেন্ট ফাইলে যুক্ত করা হয়। HTML ফাইলে <link> ট্যাগ যুক্ত করার একটি উদাহরন দেয়া হল।

প্রয়োগঃ

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