CSS কী? HTML- এর সাথে CSS কীভাবে কাজ করে – Complete Beginner Guide
আপনি যদি ওয়েব ডিজাইন বা ওয়েব ডেভেলপমেন্ট শিখতে চান, তাহলে HTML ও CSS—এই দুইটি নাম আপনাকে অবশ্যই জানতে হবে। HTML দিয়ে একটি ওয়েবসাইটের কাঠামো তৈরি করা হয়, আর CSS দিয়ে সেই কাঠামোকে সুন্দর, আকর্ষণীয় ও ব্যবহারবান্ধব করে তোলা হয়।
এই পোস্টে আমরা সহজ ভাষায় জানবো CSS কী, কেন CSS প্রয়োজন এবং HTML-এর সাথে CSS কীভাবে কাজ করে।
CSS কী?
CSS (Cascading Style Sheets) হলো একটি স্টাইলিং ভাষা, যা দিয়ে ওয়েব পেজের ডিজাইন ও লেআউট নিয়ন্ত্রণ করা হয়।
সহজভাবে বললে:
HTML = কাঠামো (Structure)
CSS = সাজসজ্জা (Design / Style)
CSS ব্যবহার করে আপনি ঠিক করতে পারেন—
- টেক্সটের রং কী হবে
- ফন্ট সাইজ কত হবে
- ব্যাকগ্রাউন্ড কালার বা ছবি
- বাটন কেমন দেখাবে
- মোবাইল ও ডেস্কটপে লেআউট কেমন হবে
CSS ছাড়া একটি ওয়েবসাইট দেখতে একদম সাদামাটা ও বিরক্তি
CSS কেন প্রয়োজন?
শুধু HTML ব্যবহার করলে ওয়েবপেজ এমন দেখাবে যেন একটি সাধারণ নোটপ্যাড ফাইল। CSS ব্যবহারের মূল কারণগুলো হলো—
1️⃣ ডিজাইন কন্ট্রোল
CSS দিয়ে আপনি পুরো ওয়েবসাইটের রং, ফন্ট, স্পেসিং ও লেআউট কন্ট্রোল করতে পারেন।
2️⃣ সময় ও পরিশ্রম বাঁচায়
একটি CSS ফাইল দিয়ে শত শত HTML পেজের ডিজাইন একসাথে পরিবর্তন করা যায়।
3️⃣ Responsive Design
CSS দিয়ে মোবাইল, ট্যাব ও ডেস্কটপ অনুযায়ী ডিজাইন আলাদা করা যায়।
4️⃣ SEO ও User Experience উন্নত করে
ভালো ডিজাইন মানেই ইউজার বেশি সময় সাইটে থাকবে, যা SEO-এর জন্য গুরুত্বপূর্ণ।
HTML ও CSS-এর মধ্যে পার্থক্য
| বিষয় | HTML | CSS |
|---|---|---|
| কাজ | কন্টেন্ট ও কাঠামো | ডিজাইন ও স্টাইল |
| পূর্ণরূপ | HyperText Markup Language | Cascading Style Sheets |
| উদাহরণ | Heading, Paragraph | Color, Font, Layout |
CSS কীভাবে HTML- এর সাথে কাজ করে?
CSS সরাসরি HTML এলিমেন্টকে টার্গেট করে কাজ করে।
যেমন—
HTML বলে দেয় “এটা একটি হেডিং”, HTML Tutorials
CSS বলে দেয় “এই হেডিং লাল হবে এবং বড় হবে।”
একটি সহজ উদাহরণ
HTML কোড:
CSS কোড:
এখানে CSS বলছে—
h1 টেক্সট লাল হবে
p টেক্সট ধূসর হবে
CSS লেখার ৩টি পদ্ধতি
HTML-এর সাথে CSS যুক্ত করার তিনটি উপায় আছে।
1️⃣ Inline CSS
HTML ট্যাগের ভেতরে সরাসরি CSS লেখা।
🔴 ব্যবহার করা উচিত নয়
কারণ এটি কোড অগোছালো করে ফেলে।
2️⃣ Internal CSS
HTML ফাইলের <style> ট্যাগের মধ্যে CSS লেখা।
🟡 ছোট প্রজেক্টের জন্য ঠিক আছে।
3️⃣ External CSS (সবচেয়ে ভালো)
আলাদা .css ফাইল তৈরি করে HTML-এর সাথে যুক্ত করা।
style.css
HTML ফাইলে যুক্ত করা:
🟢 Professional ও SEO Friendly পদ্ধতি
CSS Selector কী?
CSS Selector দিয়ে বলা হয়—কোন HTML এলিমেন্টে CSS প্রয়োগ হবে।
সাধারণ কিছু Selector
- h1 → সব h1 ট্যাগ
- .class-name → নির্দিষ্ট ক্লাস
- #id-name → নির্দিষ্ট আইডি
উদাহরণ:
Cascading মানে কী?
CSS- এর “Cascading” শব্দের মানে হলো Priority বা গুরুত্বের ক্রম।
Priority সাধারণত এমন হয়—
Inline CSS
Internal CSS
External CSS
একই এলিমেন্টে একাধিক CSS থাকলে যেটার priority বেশি, সেটাই কাজ করবে।
CSS না থাকলে ওয়েবসাইট কেমন দেখায়?
CSS ছাড়া—
- সব লেখা একই রকম
- কোনো কালার নেই
- কোনো স্পেসিং নেই
- ইউজার সাইটে থাকতে চায় না
আজকের আধুনিক ওয়েবসাইট CSS ছাড়া কল্পনাই করা যায় না।
CSS শেখা কেন গুরুত্বপূর্ণ?
আপনি যদি হতে চান—
- Web Designer
- Front-End Developer
- WordPress Customizer
- Freelancer
তাহলে CSS শেখা অবশ্যই প্রয়োজন।
বিশেষ করে WordPress থিম কাস্টমাইজ করতে CSS জানা না থাকলে আপনি সীমাবদ্ধ হয়ে পড়বেন।
উপসংহার
CSS হলো ওয়েব ডিজাইনের প্রাণ।
HTML ওয়েবসাইটের কাঠামো তৈরি করে, আর CSS সেই কাঠামোকে সুন্দর করে তোলে।
একজন সফল ওয়েব ডেভেলপার হতে হলে HTML + CSS দুটোই ভালোভাবে জানা জরুরি।
পরবর্তী টিউটোরিয়ালে আমরা শিখবো—
👉 CSS Syntax, Selector ও Comments
