Web Design & DevelopmentCSS

CSS: সিলেক্টর, Specificity, Box Model ও লেআউট

পড়তে প্রায় ১২ মিনিটসংস্করণ ১সর্বশেষ আপডেট: ২ নভেম্বর, ২০২৬১৪টি অনুশীলন প্রশ্ন

সংক্ষেপে মনে রাখুন

দ্রুত রিভিশনের জন্য মূল কথা

মূল কথা

সঠিক সিলেক্টর লিখে Specificity অনুযায়ী কোন রুল কার্যকর হবে তা বলতে পারা
Box Model দিয়ে content-box ও border-box-এ এলিমেন্টের মোট প্রস্থ হিসাব করতে পারা
display, position, Flexbox ও Media query দিয়ে সাধারণ লেআউট বানাতে পারা

সূত্র ও নিয়ম

Specificity = (ids, classes/attributes/pseudo-classes, elements). inline style > id > class > element. content-box total width = width + 2 × padding + 2 × border (margin outside)

প্রতিটি selector-কে তিন ঘরের সংখ্যা হিসেবে লিখুন (id, class, element), তারপর বাম থেকে তুলনা করুন। একটি id যত c…

যেখানে ভুল হয়

content-box-এ width শুধু content-এর মাপ, তাই padding ও border দুই পাশেই যোগ করতে হয় (দুই গুণ)। border-box দিলে width-এর ভেতরেই padding ও border ধরা থাকে। Margin কখনোই width-এর অংশ নয়।

CSS কী

CSS (Cascading Style Sheets) দিয়ে HTML-এর রং, ফন্ট, মাপ ও লেআউট ঠিক করা হয়। HTML কাঠামো দেয়, CSS দেয় চেহারা।

css

/* selector { property: value; } */
h1 {
  color: navy;
  font-size: 24px;
}

CSS-এ কমেন্ট শুধু /* ... */; // চলে না।

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

ধরন	কীভাবে	কখন
Inline	`<p style="color:red">`	একটি এলিমেন্টে দ্রুত পরিবর্তন
Internal	`<head>`-এ `<style>...</style>`	শুধু একটি পেজের জন্য
External	`<link rel="stylesheet" href="style.css">`	পুরো ওয়েবসাইটে একই ডিজাইন; সবচেয়ে ভালো চর্চা

একই প্রপার্টিতে দ্বন্দ্ব হলে Inline স্টাইল জেতে। Internal ও External-এর মধ্যে Specificity সমান হলে যেটি পরে লেখা সেটি জেতে। !important দিলে সাধারণ রুল সব হার মানে, তবে এটি কম ব্যবহার করাই ভালো।

সিলেক্টর

সিলেক্টর	উদাহরণ	কাকে ধরে
Universal	`*`	সব এলিমেন্ট
Element	`p`	সব `<p>`
Class	`.note`	`class="note"` আছে এমন সব
ID	`#header`	`id="header"` (পেজে একটিই থাকা উচিত)
Group	`h1, h2`	h1 এবং h2 দুটোই
Descendant	`div p`	div-এর ভেতরে যেকোনো স্তরের p
Child	`div > p`	div-এর সরাসরি সন্তান p
Adjacent sibling	`h2 + p`	h2-এর ঠিক পরের p
Attribute	`input[type="text"]`	text টাইপের input
Pseudo-class	`a:hover`, `li:first-child`, `li:nth-child(2)`	বিশেষ অবস্থা বা অবস্থান
Pseudo-element	`p::first-letter`, `p::before`	এলিমেন্টের একটি অংশ

Specificity: কোন রুল জিতবে

ওজন বেশি থেকে কম:

Inline style
ID সিলেক্টর
Class, attribute, pseudo-class
Element, pseudo-element

উদাহরণ:

css

#title { color: green; }   /* ID: 1, 0, 0 */
.big   { color: red; }     /* Class: 0, 1, 0 */
h1     { color: blue; }    /* Element: 0, 0, 1 */

<h1 id="title" class="big">-এর রং হবে সবুজ, কারণ ID-র ওজন সবচেয়ে বেশি; রুলগুলো কোন ক্রমে লেখা তাতে কিছু যায় আসে না।

Box Model

প্রতিটি এলিমেন্ট একটি বাক্স। ভেতর থেকে বাইরে: Content → Padding → Border → Margin।

Padding: কন্টেন্ট ও border-এর মাঝের জায়গা; এলিমেন্টের background এখানেও দেখা যায়।
Margin: border-এর বাইরের ফাঁকা জায়গা, অন্য এলিমেন্ট থেকে দূরত্ব; সবসময় স্বচ্ছ।

মোট প্রস্থ হিসাব

css

.card {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 15px;
}

ডিফল্ট box-sizing: content-box: দৃশ্যমান প্রস্থ = 200 + 10 + 10 + 5 + 5 = 230px। margin ধরলে পেজে মোট জায়গা নেয় 230 + 15 + 15 = 260px।
box-sizing: border-box দিলে width-এর ভেতরেই padding ও border ধরা হয়: দৃশ্যমান প্রস্থ 200px, কন্টেন্টের জন্য থাকে 200 − 20 − 10 = 170px।

Shorthand-এর ক্রম ঘড়ির কাঁটার দিকে: margin: top right bottom left;। margin: 10px 20px; মানে ওপর-নিচ 10px, ডান-বাম 20px।

একক (Unit)

px: নির্দিষ্ট মাপ।
%: প্যারেন্টের তুলনায়।
em: ফন্ট সাইজের তুলনায় (font-size-এ প্যারেন্টের ফন্ট সাইজ)।
rem: root (<html>) এলিমেন্টের ফন্ট সাইজের তুলনায়।
vw / vh: ব্রাউজার উইন্ডোর প্রস্থ / উচ্চতার ১%।

display ও position

display: block | inline | inline-block | none | flex | grid
display: none এলিমেন্ট লুকায় এবং জায়গাও ছেড়ে দেয়; visibility: hidden লুকায় কিন্তু জায়গা ধরে রাখে।

position	আচরণ
static	ডিফল্ট, স্বাভাবিক প্রবাহে
relative	নিজের স্বাভাবিক জায়গা থেকে সরে, পুরনো জায়গা ফাঁকা থাকে
absolute	সবচেয়ে কাছের positioned (static নয় এমন) পূর্বপুরুষের সাপেক্ষে
fixed	ব্রাউজার উইন্ডোর সাপেক্ষে; স্ক্রল করলেও নড়ে না
sticky	স্ক্রলের নির্দিষ্ট জায়গায় এসে আটকে যায়

z-index বেশি হলে এলিমেন্ট ওপরে দেখায়; এটি positioned এলিমেন্টে (এবং flex/grid আইটেমে) কাজ করে।

Flexbox ও Responsive ডিজাইন

css

.menu {
  display: flex;
  justify-content: space-between; /* main axis */
  align-items: center;            /* cross axis */
}

@media (max-width: 600px) {
  .menu { flex-direction: column; }
}

justify-content সাজায় main axis (ডিফল্টে আনুভূমিক) বরাবর; align-items সাজায় cross axis বরাবর।
Media query দিয়ে স্ক্রিনের মাপ অনুযায়ী আলাদা স্টাইল দেওয়া যায়; এটিই Responsive ডিজাইনের ভিত্তি।

পরীক্ষায় যা আসে

Class সিলেক্টর ডট (.), ID সিলেক্টর হ্যাশ (#)।
লেখার রং color, পেছনের রং background-color।
লিংকের নিচের দাগ সরাতে text-decoration: none।
External CSS যুক্ত হয় <link> দিয়ে, <head>-এর ভেতরে।
Box Model-এর ক্রম: Content, Padding, Border, Margin।

পরীক্ষার ফাঁদ

div p আর div > p এক নয়: প্রথমটি যেকোনো গভীরতার, দ্বিতীয়টি শুধু সরাসরি সন্তান।
content-box-এ width দিলে padding ও border যোগ হয়ে বাক্স বড় হয়।
color দিয়ে background বদলায় না।
display: none আর visibility: hidden-এর পার্থক্য হলো জায়গা থাকা না থাকা।

পরের ধাপ

এই টপিকে ৫টি প্রশ্ন অনুশীলন করুন

পড়া মনে আছে কি না, ছোট একটি সেটে দেখে নিন। প্রতিটি উত্তরের সাথে ব্যাখ্যা থাকবে, আর ভুল প্রশ্নগুলো রিভিশনের তালিকায় যাবে