CSS কি এবং কীভাবে HTML ফাইলের সাথে CSS যুক্ত করতে হয়?

ধরুন, আপনি একটা HTML দিয়ে ওয়েবপেজ বানালেন। কিন্তু সমস্যা হলো—সব লেখা একরকম দেখাচ্ছে, কোনো রঙ নেই, ডিজাইন নেই, দেখতে একদম সাদামাটা।
এটাই আমার ক্লাসে সবচেয়ে বেশি দেখা প্রশ্ন:
“স্যার, ওয়েবসাইট সুন্দর করবো কীভাবে?”

এই জায়গাতেই CSS কাজ করে।

CSS কি?

CSS এর পূর্ণরূপ Cascading Style Sheets।

সহজভাবে বললে:
HTML দিয়ে আপনি ওয়েবপেজের কাঠামো (Structure) তৈরি করেন, আর CSS দিয়ে সেটাকে সুন্দর (Design) করেন।

উদাহরণ:

HTML = ঘরের কাঠামো (দেয়াল, দরজা)
CSS = রঙ, সাজসজ্জা, ফার্নিচার

কেন CSS ব্যবহার করা হয়?

আমার ট্রেনিং সেন্টারে নতুন যারা আসে, তারা প্রথমে HTML শেখে। তারপর যখন CSS যোগ করে, তখন তারা বুঝতে পারে আসল মজা কোথায়।

CSS দিয়ে আপনি:

লেখা রঙ পরিবর্তন করতে পারবেন
ফন্ট স্টাইল সেট করতে পারবেন
বাটন ডিজাইন করতে পারবেন
লেআউট (layout) ঠিক করতে পারবেন
মোবাইল ও ডেস্কটপ অনুযায়ী ডিজাইন আলাদা করতে পারবেন

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

এটা সবচেয়ে গুরুত্বপূর্ণ অংশ। বাস্তবে ৩টা পদ্ধতি আছে:

১. Inline CSS (এক লাইনে CSS লেখা)

HTML ট্যাগের ভেতরেই style ব্যবহার করা হয়।

<p style="color: red;">এটা লাল রঙের লেখা</p>

কখন ব্যবহার করবেন?
ছোট কাজ বা দ্রুত পরীক্ষা করার জন্য।

সমস্যা:

কোড messy হয়ে যায়
বড় প্রজেক্টে ব্যবহার করা উচিত না

২. Internal CSS (HTML ফাইলের ভিতরে CSS)

HTML এর <head> সেকশনে <style> ট্যাগ ব্যবহার করে CSS লেখা হয়।

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>

<p>এই লেখা নীল রঙের হবে</p>

</body>
</html>

কখন ব্যবহার করবেন?

ছোট ওয়েবসাইট বা practice এর সময়

৩. External CSS (সবচেয়ে গুরুত্বপূর্ণ ও বাস্তব পদ্ধতি)

এটা আমি সবসময় ছাত্রদের শিখাই।

এখানে CSS আলাদা ফাইলে লেখা হয়।

Step 1: CSS ফাইল তৈরি করুন

ফাইল নাম দিন:

style.css

তার ভেতরে লিখুন:

p {
    color: green;
    font-size: 20px;
}

Step 2: HTML এর সাথে যুক্ত করুন

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

<p>এই লেখা সবুজ হবে</p>

</body>
</html>

বাস্তব ক্লাসরুম অভিজ্ঞতা

Alamin Computer Training Center-এ আমি একটা জিনিস খুব লক্ষ্য করেছি।

একজন ছাত্র CSS ফাইল তৈরি করেছিল, কিন্তু কাজ করছিল না।

আমি দেখে বুঝলাম সে লিখেছে:

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

কিন্তু ফাইলের নাম ছিল style.css

এই ছোট ভুলের জন্য পুরো CSS কাজ করছিল না।

সাধারণ ভুল এবং সমাধান

ভুল ১: CSS ফাইল লোড না হওয়া

কারণ:

ভুল file name
ভুল path

সমাধান:

file name ঠিক আছে কিনা চেক করুন
একই folder এ আছে কিনা দেখুন

ভুল ২: CSS কাজ করছে না

অনেক সময় ছাত্ররা বলে “স্যার, CSS লিখেছি কিন্তু কাজ করছে না”

কারণ:

syntax ভুল
selector ভুল

উদাহরণ ভুল:

p {
color red;
}

সঠিক:

p {
    color: red;
}

ভুল ৩: Inline CSS দিয়ে সব করা

নতুনরা প্রায়ই সব কিছু inline CSS দিয়ে করতে চায়।

এটা করলে:

কোড বড় হয়ে যায়
manage করা কঠিন হয়

আমার অভিজ্ঞতা অনুযায়ী:

Practice → Internal CSS
Real Project → External CSS

External CSS ব্যবহার করলে:

কোড clean থাকে
multiple page-এ reuse করা যায়
professional কাজ করা সহজ হয়

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

একটি HTML ফাইল তৈরি করুন
একটি CSS ফাইল তৈরি করুন
link করে দিন
paragraph এর রঙ পরিবর্তন করুন

এটা ঠিকমতো করতে পারলে বুঝবেন আপনি CSS linking শিখে গেছেন।

FAQ

CSS না জানলে কি ওয়েবসাইট বানানো যায়?

হ্যাঁ, HTML দিয়ে বানানো যায়। কিন্তু দেখতে ভালো হবে না।

CSS শেখা কি কঠিন?

না। নিয়ম বুঝে practice করলে খুব সহজ।

External CSS কেন বেশি ব্যবহার করা হয়?

কারণ এটি clean, reusable এবং professional।

CSS শেখা মানে শুধু কোড লেখা না—এটা আসলে ডিজাইন শেখা।

যখন আপনি HTML + CSS একসাথে ব্যবহার করবেন, তখনই বুঝবেন ওয়েব ডেভেলপমেন্টের আসল সৌন্দর্য কোথায়।

CSS কি এবং কীভাবে HTML ফাইলের সাথে CSS যুক্ত করতে হয়?