CSS ইন্ট্রোডাকশন
CSS (Cascading Style Sheets) ওয়েবপেজের স্টাইলিং এবং লেআউট পরিচালনা করে। HTML কাঠামো তৈরি করলে, CSS তার সৌন্দর্য যোগ করে।
CSS এর বেসিক সিনট্যাক্স
selector {
property: value;
property: value;
}
/* উদাহরণ */
p {
color: blue;
font-size: 16px;
}
CSS যোগ করার ৩টি উপায়
/* ১. Inline */
<p style="color:red;">হ্যালো</p>
/* ২. Internal */
<style>p {color: red;}</style>
/* ৩. External */
<link rel="stylesheet"
href="style.css">
💡 পেশাদার টিপ
সর্বদা External CSS ফাইল ব্যবহার করুন। এটি আপনার কোড পরিচ্ছন্ন রাখে এবং রক্ষণাবেক্ষণ সহজ করে।
CSS সিলেক্টর
text-decoration
লাইন এবং আন্ডারলাইন যোগ করে।
text-decoration: underline;
text-decoration: none;
text-decoration: line-through;
বেসিক
line-height
লাইনের মধ্যে দূরত্ব নির্ধারণ করে।
line-height: 1.5;
line-height: 2;
মাঝারি
letter-spacing
অক্ষরের মধ্যে দূরত্ব বৃদ্ধি করে।
letter-spacing: 2px;
letter-spacing: 0.1em;
মাঝারি
text-shadow
টেক্সটে ছায়া যোগ করে।
text-shadow: 2px 2px 5px gray;
মাঝারি
বক্স মডেল
CSS Box Model: Content → Padding → Border → Margin
মূল বক্স প্রপার্টি
/* সাইজ */
width: 200px;
height: 100px;
/* প্যাডিং (অভ্যন্তর) */
padding: 10px;
padding: 10px 20px;
/* বর্ডার */
border: 2px solid black;
border-radius: 10px;
/* মার্জিন (বাহ্যিক) */
margin: 20px;
margin: 10px auto;
উন্নত বক্স প্রপার্টি
/* বক্স সাইজিং */
box-sizing: border-box;
/* ছায়া */
box-shadow: 0 4px 8px
rgba(0,0,0,0.1);
/* সীমাবদ্ধতা */
max-width: 100%;
min-height: 50px;
/* ওভারফ্লো */
overflow: hidden;
overflow: auto;
width & height
উপাদানের প্রস্থ এবং উচ্চতা।
width: 300px;
width: 100%;
width: 50vw;
বেসিক
padding
বিষয়বস্তু এবং সীমানার মধ্যে স্থান।
padding: 10px;
padding: 10px 20px;
padding-top: 15px;
বেসিক
margin
উপাদানের বাইরের স্থান।
margin: 20px;
margin: 0 auto;
margin-left: 30px;
বেসিক
border
উপাদানের চারপাশে সীমানা।
border: 2px solid #000;
border: 1px dashed red;
border: 3px dotted blue;
বেসিক
border-radius
সীমানার কোণ গোল করে।
border-radius: 10px;
border-radius: 50%;
border-radius: 10px 20px;
মাঝারি
box-shadow
উপাদানে ছায়া যোগ করে।
box-shadow: 0 4px 8px
rgba(0,0,0,0.1);
box-shadow: inset 0 0 5px;
মাঝারি
box-sizing
প্যাডিং এবং বর্ডার পরিমাপ পদ্ধতি।
box-sizing: border-box;
box-sizing: content-box;
মাঝারি
max-width & min-width
সর্বাধিক এবং ন্যূনতম প্রস্থ সীমা।
max-width: 1200px;
min-width: 200px;
মাঝারি
লেআউট এবং ডিসপ্লে
| প্রপার্টি | বর্ণনা | উদাহরণ |
|---|---|---|
| display: block | সম্পূর্ণ প্রস্থ জুড়ে প্রসারিত | div, p, h1 |
| display: inline | প্রয়োজনীয় প্রস্থ নেয় | span, a, strong |
| display: inline-block | ইনলাইন কিন্তু সাইজ সেট করা যায় | button, img |
| display: flex | ফ্লেক্সিবল লেআউট সিস্টেম | আধুনিক নেভিগেশন |
| display: grid | ২D গ্রিড লেআউট সিস্টেম | কমপ্লেক্স লেআউট |
| display: none | উপাদান লুকিয়ে রাখে | মোবাইল মেনু |
position: static
ডিফল্ট অবস্থান। স্বাভাবিক প্রবাহে থাকে।
position: static;
বেসিক
position: relative
নিজের অবস্থান থেকে সম্পর্কিত।
position: relative;
top: 10px;
left: 20px;
মাঝারি
position: absolute
প্রিন্ট থেকে পৃথক। প্যারেন্টের সাপেক্ষে।
position: absolute;
top: 0;
right: 0;
মাঝারি
position: fixed
স্ক্রল করলেও একই জায়গায় থাকে।
position: fixed;
bottom: 20px;
right: 20px;
মাঝারি
position: sticky
স্ক্রল করার সময় উপরে আটকে যায়।
position: sticky;
top: 0;
অ্যাডভান্সড
z-index
উপাদানের স্তর নির্ধারণ করে।
z-index: 10;
z-index: -1;
মাঝারি
ফ্লেক্সবক্স লেআউট
Flexbox আধুনিক ওয়েব ডিজাইনের জন্য সবচেয়ে শক্তিশালী টুল। এটি এক-মাত্রিক লেআউট তৈরি করে।
/* কন্টেইনারে সেট করুন */
.container {
display: flex;
justify-content: center; /* X-অক্ষ সারিবদ্ধকরণ */
align-items: center; /* Y-অক্ষ সারিবদ্ধকরণ */
flex-direction: row; /* দিকনির্দেশনা */
flex-wrap: wrap; /* মোড়ানো */
gap: 20px; /* আইটেমের মধ্যে ফাঁক */
}
justify-content
প্রধান অক্ষে আইটেম সারিবদ্ধ করে।
justify-content: center;
justify-content: space-between;
justify-content: flex-start;
মাঝারি
align-items
ক্রস অক্ষে আইটেম সারিবদ্ধ করে।
align-items: center;
align-items: flex-start;
align-items: stretch;
মাঝারি
flex-direction
ফ্লেক্স আইটেমের দিকনির্দেশনা।
flex-direction: row;
flex-direction: column;
flex-direction: row-reverse;
মাঝারি
flex-wrap
আইটেম আরেকটি লাইনে যাবে কিনা।
flex-wrap: wrap;
flex-wrap: nowrap;
flex-wrap: wrap-reverse;
মাঝারি
gap
ফ্লেক্স আইটেমের মধ্যে ফাঁক।
gap: 20px;
gap: 10px 20px;
মাঝারি
flex (শর্টহ্যান্ড)
আইটেমের বৃদ্ধি এবং সংকোচন।
flex: 1; /* সমান ভাগ */
flex: 2; /* দ্বিগুণ ভাগ */
অ্যাডভান্সড
গ্রিড লেআউট
CSS Grid দ্বি-মাত্রিক লেআউট তৈরি করে - সারি এবং কলাম উভয়েই নিয়ন্ত্রণ করে।
/* বেসিক গ্রিড সেটআপ */
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 20px;
margin: 20px 0;
}
/* রেসপন্সিভ গ্রিড */
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
grid-template-columns
কলামের সংখ্যা এবং আকার।
grid-template-columns: 1fr 1fr;
grid-template-columns: 200px auto;
grid-template-columns: repeat(3, 1fr);
মাঝারি
grid-template-rows
সারির সংখ্যা এবং আকার।
grid-template-rows: auto;
grid-template-rows: 100px 200px;
মাঝারি
gap
সারি এবং কলামের মধ্যে ফাঁক।
gap: 20px;
gap: 10px 20px;
মাঝারি
grid-column
আইটেম কতটা কলাম জুড়ে থাকবে।
grid-column: 1 / 3;
grid-column: span 2;
অ্যাডভান্সড
grid-row
আইটেম কতটা সারি জুড়ে থাকবে।
grid-row: 1 / 3;
grid-row: span 2;
অ্যাডভান্সড
grid-auto-flow
অনুপস্থিত আইটেমের স্থান নির্ধারণ।
grid-auto-flow: row;
grid-auto-flow: column;
অ্যাডভান্সড
ইফেক্ট এবং অ্যানিমেশন
ট্রানজিশন
/* মসৃণ পরিবর্তন */
.box {
background: blue;
transition: all 0.3s ease;
}
.box:hover {
background: red;
transform: scale(1.1);
}
অ্যানিমেশন
/* ঘূর্ণায়মান অ্যানিমেশন */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.box {
animation: spin 2s linear
infinite;
}
transition
প্রপার্টি পরিবর্তনকে মসৃণ করে।
transition: all 0.3s ease;
transition: color 0.5s;
transition-property: opacity;
মাঝারি
@keyframes
অ্যানিমেশন ফ্রেম সংজ্ঞায়িত করে।
@keyframes slide {
from { left: 0; }
to { left: 100px; }
}
মাঝারি
animation
@keyframes অ্যানিমেশন প্রয়োগ করে।
animation: slide 2s
ease-in-out infinite;
মাঝারি
transform
উপাদানকে রূপান্তরিত করে।
transform: rotate(45deg);
transform: scale(1.5);
transform: translate(50px, 20px);
মাঝারি
filter
ভিজ্যুয়াল ইফেক্ট প্রয়োগ করে।
filter: blur(5px);
filter: brightness(120%);
filter: grayscale(100%);
মাঝারি
clip-path
উপাদান ক্লিপ করে আকৃতি তৈরি করে।
clip-path: circle(50%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
অ্যাডভান্সড
রেসপন্সিভ ডিজাইন
রেসপন্সিভ ডিজাইন সব ডিভাইসে সুন্দরভাবে কাজ করে - মোবাইল, ট্যাবলেট এবং ডেস্কটপ।
/* মোবাইল ফার্স্ট অ্যাপ্রোচ */
body {
font-size: 16px;
}
/* ট্যাবলেট */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
/* ডেস্কটপ */
@media (min-width: 1024px) {
body {
font-size: 20px;
}
}
@media query
বিভিন্ন স্ক্রিন সাইজের জন্য স্টাইল।
@media (max-width: 768px) {
/* মোবাইল স্টাইল */
}
মাঝারি
viewport meta
মোবাইলে সঠিক জুম নিয়ন্ত্রণ।
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
মাঝারি
Flexible units
নমনীয় ইউনিট ব্যবহার করুন।
width: 100%;
width: 50vw;
font-size: 1.5rem;
মাঝারি
max-width
বৃহৎ স্ক্রিনে সর্বাধিক প্রস্থ সীমিত করুন।
.container {
max-width: 1200px;
margin: 0 auto;
}
মাঝারি
Grid responsive
গ্রিড বিভিন্ন ডিভাইসে পরিবর্তিত হয়।
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
মাঝারি
picture & srcset
বিভিন্ন ডিভাইসের জন্য ভিন্ন ইমেজ।
<img srcset="small.jpg 480w,
large.jpg 1200w">
অ্যাডভান্সড
অ্যাডভান্সড CSS
CSS Variables
পুনরায় ব্যবহারযোগ্য মূল্য সংরক্ষণ করুন।
:root {
--main-color: #667eea;
}
h1 {
color: var(--main-color);
}
অ্যাডভান্সড
Pseudo-elements
::before এবং ::after দ্বারা উপাদান যোগ করুন।
p::before {
content: "👉 ";
}
p::after {
content: " ✓";
}
অ্যাডভান্সড
@font-face
কাস্টম ফন্ট যোগ করুন।
@font-face {
font-family: 'CustomFont';
src: url('font.woff2');
}
অ্যাডভান্সড
calc()
গতিশীল মান গণনা করুন।
width: calc(100% - 20px);
margin: calc(1rem + 5px);
অ্যাডভান্সড
backdrop-filter
পটভূমিতে ফিল্টার প্রয়োগ করুন।
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.8);
অ্যাডভান্সড
mix-blend-mode
ব্লেন্ডিং মোড নির্ধারণ করুন।
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
অ্যাডভান্সড
CSS Counters
স্বয়ংক্রিয় গণনা সিস্টেম।
counter-reset: section;
counter-increment: section;
content: counter(section);
অ্যাডভান্সড
writing-mode
লেখার দিকনির্দেশনা পরিবর্তন করুন।
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
অ্যাডভান্সড
⚡ উন্নত টিপস
CSS Selectors Specificity: ID (100) > Class (10) > Element (1)
Performance: ব্রাউজার DevTools ব্যবহার করে আপনার সাইট পরীক্ষা করুন এবং অপ্টিমাইজ করুন।
Best Practice: Mobile-first অ্যাপ্রোচ অনুসরণ করুন এবং বড় স্ক্রিনের জন্য প্রগতিশীল উন্নতি করুন।
🧭 শিক্ষার্থীদের জন্য শেখার পথ
1️⃣
বেসিক সিনট্যাক্স এবং সিলেক্টর
2️⃣
বক্স মডেল এবং স্পেসিং
3️⃣
রঙ, ফন্ট এবং টেক্সট
4️⃣
লেআউট এবং পজিশনিং
5️⃣
ফ্লেক্সবক্স এবং গ্রিড
6️⃣
অ্যানিমেশন এবং ট্রানজিশন
7️⃣
রেসপন্সিভ ডিজাইন
8️⃣
প্রকল্প ভিত্তিক কাজ
✅ CSS বেস্ট প্র্যাকটিস
১. নামকরণ কনভেনশন: অর্থপূর্ণ ক্লাস নাম ব্যবহার করুন যেমন .header-main বা .card-title।
২. DRY নীতি: একই স্টাইল বারবার লিখবেন না। ক্লাস এবং মিক্সিন ব্যবহার করুন।
३. মোবাইল ফার্স্ট: প্রথমে মোবাইলের জন্য ডিজাইন করুন, তারপর বড় স্ক্রিনের জন্য বৃদ্ধি করুন।
४. Specificity এড়ান: !important ব্যবহার করবেন না এবং অত্যধিক নেস্টেড সিলেক্টর এড়িয়ে চলুন।
५. পারফরম্যান্স: CSS ফাইল ছোট রাখুন এবং অপ্রয়োজনীয় সিলেক্টর সরান।
६. ব্রাউজার সামঞ্জস্য: বিভিন্ন ব্রাউজারে টেস্ট করুন এবং প্রয়োজনে vendor prefix যোগ করুন।
| ইউনিট | বর্ণনা | ব্যবহার |
|---|---|---|
| px | পিক্সেল - নিরঙ্কুশ মান | বর্ডার, ছোট প্যাডিং |
| em | প্যারেন্ট ফন্ট সাইজের সাপেক্ষে | রেসপন্সিভ টেক্সট |
| rem | রুট ফন্ট সাইজের সাপেক্ষে | আধুনিক লেআউট |
| % | প্যারেন্টের শতাংশ | রেসপন্সিভ প্রস্থ |
| vw / vh | ভিউপোর্ট প্রস্থ/উচ্চতা | ফুল স্ক্রিন এলিমেন্ট |
| ch | অক্ষরের প্রস্থ | টাইপোগ্রাফি নিয়ন্ত্রণ |
| fr | গ্রিড ফ্র্যাকশন ইউনিট | গ্রিড লেআউট |
🎯 কমন CSS সমস্যা এবং সমাধান
সমস্যা: মার্জিন collapse হয়ে যাচ্ছে।
সমাধান: প্যারেন্টে overflow: hidden যোগ করুন বা padding ব্যবহার করুন।
সমস্যা: ফ্লোটিং এলিমেন্ট কাজ করছে না।
সমাধান: Flexbox বা Grid ব্যবহার করুন (float এখন ডিপ্রিকেটেড)।
সমস্যা: মোবাইলে টেক্সট খুব বড়।
সমাধান: মিডিয়া কোয়েরি ব্যবহার করে font-size কমান।
সমস্যা: z-index কাজ করছে না।
সমাধান: নিশ্চিত করুন যে position static নয়।