CSS link in HTML - CSS যুক্ত করার পদ্ধতি (Inline, Internal, External CSS)
আজ আমরা শুরু করছি CSS শেখা – যা ওয়েবসাইটের ডিজাইনের প্রাণ! HTML শুধু স্ট্রাকচার তৈরি করে, কিন্তু CSS তাকে রঙ, ফন্ট, স্পেসিং, এবং সুন্দর লেআউট দিয়ে জীবন্ত করে তোলে। আজ আমরা জানবো CSS কী, কেন এটা প্রয়োজন, এবং কীভাবে HTML ডকুমেন্টে CSS ব্যবহার করা হয়।
আমরা দেখবো তিনটি পদ্ধতিতে CSS যুক্ত করা যায় — Inline, Internal, এবং External।প্রথমে ছোট উদাহরণ দেখবো, তারপর প্রতিটি পদ্ধতির ব্যবহার ও পার্থক্য ব্যাখ্যা করবো।
তাহলে চল শুরু করি CSS শেখার প্রথম ধাপ!
💻 কোড উদাহরণ:
✅ ১. Inline CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline CSS</title>
</head>
<body>
<p style="color: blue; font-size: 20px;">This is an inline styled paragraph.</p>
</body>
</html>
🔍 ব্যাখ্যা:
-
styleঅ্যাট্রিবিউট HTML ট্যাগের ভেতরে সরাসরি CSS লিখে। -
এখানে
color: blueমানে লেখা নীল হবে,font-size: 20pxমানে ফন্ট সাইজ ২০ পিক্সেল।
✅ ২. Internal CSS
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This paragraph is styled with internal CSS.</p>
</body>
</html>
-
<style>ট্যাগ ব্যবহার করা হয়েছে<head>ট্যাগের মধ্যে। -
এখানে সব
pট্যাগের জন্য একই স্টাইল প্রযোজ্য হবে। -
color: greenমানে লেখা সবুজ,font-size: 18pxমানে ১৮ পিক্সেল।
✅ ৩. External CSS
👉 index.html
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>This paragraph is styled with external CSS.</p>
</body>
</html>
👉 style.css
CSS
p {
color: red;
font-size: 22px;
}
-
<link>ট্যাগ দিয়ে HTML ফাইলে আলাদা CSS ফাইল যুক্ত করা হয়। -
এতে কোড আলাদা থাকে, এবং বড় ওয়েবসাইটে এটা খুবই দরকারি।
-
style.cssফাইলে CSS লেখা হয়, যা HTML-এর সব পেজে ব্যবহার করা যায়।
Topic Covered: CSS link in HTML, Inline CSS, Internal CSS, External CSS
