CSSBeginner

CSS Introduction

CSS কীভাবে ওয়েবপেজকে সুন্দর করে তোলে, CSS-এর সাথে HTML-এর সম্পর্ক এবং প্রথম CSS ব্যবহারের বাংলা পরিচিতি।

12টি অংশবাংলা ভাষায়

CSS (Cascading Style Sheets) হলো ওয়েবপেজের রূপ-সৌন্দর্যের ভাষা। HTML যেখানে পেজের গঠন ঠিক করে, CSS সেখানে নির্ধারণ করে সে গঠনটি কেমন দেখাবে — রং, ফন্ট, ব্যবধান, অবস্থান এবং লেআউট সবকিছু।

CSS ছাড়া কী হবে?

CSS ছাড়া একটি ওয়েবপেজ কেবল কালো-সাদা টেক্সটের সমষ্টি দেখাবে — কোনো রং, স্পেসিং বা সাজসজ্জা থাকবে না। CSS-ই সেই সাদামাটা কাঠামোকে একটি পেশাদার, সুন্দর ওয়েবপেজে রূপ দেয়।

CSS কীভাবে কাজ করে

CSS selector দিয়ে কোন element-কে স্টাইল করা হবে তা বেছে নেয়
Property ও value দিয়ে সেই element-এর চেহারা ঠিক করে
HTML ফাইলে তিনভাবে CSS যুক্ত করা যায় — inline, internal, external

একটি সহজ উদাহরণ

style.csscss

css

h1 {
  color: #16a34a;
  font-size: 2.5rem;
  text-align: center;
}

উপরের নিয়মটি পেজের প্রতিটি <h1> শিরোনামকে সবুজ রঙ, বড় ফন্ট এবং কেন্দ্রীভূত অবস্থান দেবে।

CSS যুক্ত করার উপায়

পদ্ধতি	বর্ণনা
Inline	সরাসরি `style` অ্যাট্রিবিউটে
Internal	HTML ফাইলে `<style>` ট্যাগের ভেতরে
External	আলাদা `.css` ফাইলে (সবচেয়ে ভালো)

external stylesheet লিংকhtml

html

<head>
  <link rel="stylesheet" href="style.css" />
</head>

সেরা অভ্যাস

প্রজেক্টে সবসময় একটি আলাদা external stylesheet ব্যবহার করুন। এতে কোড সুপরিচ্ছন্ন থাকে এবং একাধিক পেজে একই স্টাইল সহজে প্রয়োগ করা যায় (DRY)।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।