🔖 শুরু করা (Getting Started)
CSS (Cascading Style Sheets) মূলত ব্রাউজারকে বলে দেয় যে HTML এলিমেন্টগুলো স্ক্রিনে কেমন দেখাবে। এটি শেখা খুব সহজ, কিন্তু এর গভীরে অনেক চমকপ্রদ বিষয় লুকিয়ে আছে। 🚀
📌 CSS এর সিনট্যাক্স (Syntax)
একটি CSS রুলসেট (Ruleset) প্রধানত দুটি অংশ নিয়ে গঠিত: Selector এবং Declaration Block।
h1 {
color: blue;
font-size: 24px;
}h1(Selector): কোন HTML এলিমেন্টকে ডিজাইন করতে চান তা নির্বাচন করে।color: blue;(Declaration): স্টাইল প্রপার্টি এবং তার ভ্যালু। প্রতিটি ডিক্লারেশন সেমিকোলন (;) দিয়ে শেষ করতে হয়। 💎
📌 HTML-এ CSS যুক্ত করার উপায়
HTML-এর সাথে CSS তিনভাবে যুক্ত করা যায়। চলুন প্রতিটি পদ্ধতির ডিপ-ডাইভ করি।
১. Inline CSS (ইনলাইন সিএসএস)
সরাসরি HTML ট্যাগের ভেতরে style অ্যাট্রিবিউট ব্যবহার করে।
<h1 style="color: red; text-align: center;">হ্যালো CSS!</h1>নিঞ্জা টিপস: ইনলাইন CSS এড়িয়ে চলাই প্রফেশনালদের কাজ। এটি কোডকে নোংরা করে এবং Maintenance খুব কঠিন করে তোলে। শুধুমাত্র ইমার্জেন্সি ওভাররাইড বা ডায়নামিক জাভাস্ক্রিপ্ট ইনজেকশনের ক্ষেত্রে এটি ব্যবহার করা হয়।
২. Internal CSS (ইন্টারনাল সিএসএস)
HTML পেজের <head> সেকশনে <style> ট্যাগের ভেতরে।
<head>
<style>
body { background-color: #f3f4f6; }
h1 { color: #1f2937; }
</style>
</head>ব্যবহার: এটি তখনই ব্যবহার করবেন যখন আপনার ওয়েবসাইটটি শুধুমাত্র এক পেজের (Single Page) হয়, অথবা ইমেইল টেমপ্লেট ডিজাইন করতে হয় (যেখানে এক্সটার্নাল ফাইল সাপোর্ট করে না)।
৩. External CSS (এক্সটারনাল সিএসএস) 🏆
সবচেয়ে সেরা পদ্ধতি! একটি আলাদা .css ফাইল তৈরি করে সেটিকে HTML-এ লিংক করা।
<head>
<link rel="stylesheet" href="styles.css">
</head>📌 🥷 নিঞ্জা টেকনিক: ব্রাউজার ক্যাশিং ও ভার্সনিং
এক্সটারনাল CSS ব্যবহারের সবচেয়ে বড় সুবিধা হলো ব্রাউজার ক্যাশিং (Browser Caching)। ব্রাউজার একবার CSS ফাইল ডাউনলোড করলে সেটি সেভ করে রাখে, ফলে পরের পেজগুলো বিদ্যুতের গতিতে ⚡ লোড হয়!
সমস্যা: আপনি CSS ফাইলে নতুন ডিজাইন আপডেট করলেন, কিন্তু ইউজারের ব্রাউজার পুরনো সেভ করা (cached) ফাইল দেখাচ্ছে। ইউজার নতুন ডিজাইন দেখতে পাচ্ছে না!
নিঞ্জা সলিউশন (Cache Busting):
CSS লিংক করার সময় ফাইলের নামের শেষে একটি ভার্সন বা কোয়েরি স্ট্রিং ?v=1.0 যোগ করে দিন। 💥
<!-- ইউজার নতুন আপডেট পাবে সাথে সাথেই! -->
<link rel="stylesheet" href="styles.css?v=1.1">যখনই বড় কোনো আপডেট করবেন, v=1.1 কে v=1.2 করে দেবেন। ব্রাউজার বুঝবে এটি নতুন ফাইল এবং সাথে সাথে ডাউনলোড করে নেবে! 🎉
📌 Cascading মানে কী? (The “C” in CSS)
CSS-এর প্রথম শব্দই হলো Cascading। এর মানে হলো “পানির জলপ্রপাতের মতো উপর থেকে নিচে পড়া”।
যদি আপনি একই এলিমেন্টের জন্য একাধিক স্টাইল লেখেন, তাহলে একদম শেষে (নিচে) যে স্টাইলটি লেখা হয়েছে সেটিই কাজ করবে।
p { color: red; }
p { color: blue; } /* এটি কাজ করবে, কারণ এটি শেষে আছে! ✅ */এই কনসেপ্টটি খুব সহজ মনে হলেও, বড় প্রোজেক্টে এটিই ডেভেলপারদের সবচেয়ে বেশি ভোগায়! 😅 (পরবর্তী চ্যাপ্টারে আমরা Specificity নিয়ে ডিপ-ডাইভ করব)।