সম্পূর্ণ বাংলা CSS কোর্স

CSS Zero থেকে Hero। ব্যাখ্যা, code, live demo, practice, project এবং quiz—সব একটি offline ফাইলে।

১৯টি অধ্যায়Modern CSSFlexbox + GridResponsive DesignOffline

অধ্যায় ০ — CSS শুরু করার আগে

CSS কী, HTML-এর সঙ্গে কীভাবে যুক্ত করবেন এবং প্রথম style লিখবেন।

CSS কী?

CSS-এর পূর্ণরূপ Cascading Style Sheets। HTML পেজের রং, আকার, জায়গা, layout, responsive design এবং animation তৈরি করতে CSS ব্যবহার হয়।

যা আগে জানা দরকার

h1, p, div, class ও id-এর সাধারণ HTML ব্যবহার জানলেই এই কোর্স শুরু করা যাবে।

প্রথম CSS চালানোর নিয়ম

  1. index.html নামে একটি ফাইল বানান।
  2. <head>-এর ভিতরে <style> লিখুন।
  3. নিচের code লিখে Save করুন।
  4. Browser refresh করুন।
প্রথম CSS
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>আমার প্রথম CSS</title>

    <style>
        h1 {
            color: blue;
            text-align: center;
        }

        p {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>CSS শেখা শুরু</h1>
    <p>এই লেখাটির আকার CSS দিয়ে পরিবর্তন হয়েছে।</p>
</body>
</html>
ফলাফল: Heading নীল ও মাঝখানে হবে এবং paragraph বড় দেখাবে।

অধ্যায় ১ — CSS যুক্ত করার ৩টি পদ্ধতি

Inline, Internal ও External CSS কোথায় এবং কখন ব্যবহার করবেন।

Inline CSS

একটি element-এর জন্য style attribute। ছোট পরীক্ষা ছাড়া বড় project-এ এড়িয়ে চলুন।

Internal CSS

একটি HTML পেজের <style>-এর ভিতরে CSS। এক পেজের demo-তে ভালো।

External CSS

আলাদা style.css ফাইল। Professional project-এ সবচেয়ে ভালো পদ্ধতি।

তিনটি পদ্ধতি
<!-- 1. Inline -->
<h1 style="color: red;">Hello</h1>

<!-- 2. Internal: head-এর ভিতরে -->
<style>
    h1 { color: green; }
</style>

<!-- 3. External: head-এর ভিতরে -->
<link rel="stylesheet" href="style.css">

/* style.css ফাইল */
h1 {
    color: purple;
}
সেরা নিয়ম: সাধারণ project-এ External CSS ব্যবহার করুন।

অধ্যায় ২ — Syntax, Selector ও Comment

CSS rule কীভাবে তৈরি হয় এবং element নির্বাচন করা হয়।

CSS rule: selector { property: value; }
Selector-এর প্রয়োজনীয় ধরন
/* Element selector */
p {
    color: #334155;
}

/* Class selector */
.card {
    padding: 20px;
}

/* ID selector */
#hero {
    min-height: 400px;
}

/* একাধিক selector */
h1, h2, h3 {
    font-family: Arial, sans-serif;
}

/* ভেতরের element */
nav a {
    text-decoration: none;
}

/* Direct child */
.menu > li {
    display: inline-block;
}

/* Attribute selector */
input[type="email"] {
    border-color: blue;
}

/* Universal selector */
* {
    box-sizing: border-box;
}
মনে রাখুন: একই style বহু জায়গায় লাগাতে class সবচেয়ে বেশি ব্যবহার হয়।

অধ্যায় ৩ — Cascade, Specificity ও Inheritance

কোন CSS rule কাজ করবে এবং কেন অন্য rule হারিয়ে যায়।

Cascade

একই শক্তির rule হলে পরে লেখা rule সাধারণত কাজ করে।

Specificity

সাধারণভাবে Inline > ID > Class > Element selector।

Inheritance

color ও font-family-এর মতো কিছু property parent থেকে child-এ যায়।

Specificity demo
p {
    color: blue;
}

.message {
    color: green;
}

#notice {
    color: red;
}

/* HTML */
<p id="notice" class="message">এই লেখা লাল হবে</p>
কারণ: ID selector-এর specificity class ও element-এর চেয়ে বেশি। অপ্রয়োজনে !important ব্যবহার করবেন না।

অধ্যায় ৪ — Color, Background ও Gradient

রং, background image, opacity ও gradient নিয়ন্ত্রণ।

Color-এর বিভিন্ন format
.one { color: red; }
.two { color: #2563eb; }
.three { color: rgb(37, 99, 235); }
.four { color: hsl(221, 83%, 53%); }

.hero {
    color: white;
    background-color: #1e293b;
    background-image:
        linear-gradient(135deg, rgba(37,99,235,.9), rgba(124,58,237,.9)),
        url("hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
পরামর্শ: লেখা ও background-এর contrast যেন পরিষ্কার থাকে।

অধ্যায় ৫ — Units ও CSS Values

px, %, rem, em, vw, vh, ch, min(), max() ও clamp()।

Unitব্যবহার
pxনির্দিষ্ট ছোট মাপ, border ইত্যাদি
remRoot font-size অনুযায়ী scalable spacing ও text
%Parent-এর তুলনায় মাপ
vw/vhViewport width/height
chলেখার line width
Responsive value
html {
    font-size: 16px;
}

.container {
    width: min(92%, 1200px);
    margin-inline: auto;
}

h1 {
    font-size: clamp(2rem, 5vw, 4.5rem);
}

article {
    max-width: 65ch;
}
ফলাফল: Screen ছোট-বড় হলে heading নিজে থেকে responsive হবে।

অধ্যায় ৬ — Typography ও Text Styling

Font, line-height, alignment, decoration, overflow ও web font।

Typography system
body {
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #172033;
}

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-align: center;
}

a {
    color: #2563eb;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
মনে রাখুন: Paragraph-এর জন্য আরামদায়ক line-height ও সীমিত line width পড়া সহজ করে।

অধ্যায় ৭ — Box Model সম্পূর্ণ

Content, padding, border, margin, width, height ও overflow।

Margin
Border
PaddingContent
Box model code
/* সব project-এর শুরুতে */
*, *::before, *::after {
    box-sizing: border-box;
}

.card {
    width: 320px;
    padding: 24px;
    border: 2px solid #cbd5e1;
    margin: 20px auto;
    border-radius: 16px;
    overflow: hidden;
}
গুরুত্বপূর্ণ: border-box দিলে width-এর ভিতরেই padding ও border গণনা হয়।

অধ্যায় ৮ — Display, Position ও Z-index

Block, inline, hidden, sticky, absolute ও fixed element।

Display ও position
.inline-block {
    display: inline-block;
}

.hidden {
    display: none;
}

.header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.card {
    position: relative;
}

.badge {
    position: absolute;
    top: 12px;
    right: 12px;
}

.chat-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
}
নিয়ম: Absolute child-এর reference হিসেবে parent-এ সাধারণত position: relative দিন।

অধ্যায় ৯ — Flexbox Zero to Hero

এক মাত্রার responsive layout, alignment, navigation ও card row।

Flexbox Live Demo

123
Responsive Flex layout
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.card {
    flex: 1 1 280px;
}
মানে: Card-এর ideal width 280px; জায়গা কম হলে নিচে নেমে যাবে।

অধ্যায় ১০ — CSS Grid Zero to Hero

দুই মাত্রার professional page ও card layout।

Auto responsive Grid
.gallery {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1.5rem;
}

.dashboard {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 100vh;
}

.featured {
    grid-column: span 2;
}
Auto-fit: যতগুলো column জায়গায় ধরে ততগুলো তৈরি করে; mobile-এ নিজে থেকে এক column হয়।

অধ্যায় ১১ — Responsive Design ও Media Query

Mobile-first website, breakpoints, responsive image ও container।

Mobile-first: আগে ছোট screen-এর style লিখুন, তারপর বড় screen-এর জন্য min-width media query দিন।
Mobile-first layout
.page {
    width: min(92%, 1200px);
    margin-inline: auto;
}

.layout {
    display: grid;
    gap: 1rem;
}

img {
    max-width: 100%;
    height: auto;
}

/* Tablet এবং বড় screen */
@media (min-width: 768px) {
    .layout {
        grid-template-columns: 260px 1fr;
    }
}

/* Desktop */
@media (min-width: 1100px) {
    .layout {
        grid-template-columns: 280px 1fr 240px;
    }
}
পরীক্ষা: Chrome DevTools-এর device toolbar দিয়ে বিভিন্ন screen size দেখুন।

অধ্যায় ১২ — Pseudo-class ও Pseudo-element

Hover, focus, nth-child, before, after ও interactive state।

Interactive selector
a:hover {
    color: #7c3aed;
}

button:focus-visible,
input:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
}

input:invalid:not(:placeholder-shown) {
    border-color: #dc2626;
}

.list li:nth-child(odd) {
    background: #f8fafc;
}

.title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin-top: 8px;
    background: currentColor;
}
Accessibility: Keyboard focus দেখা যায় এমন style কখনও সরিয়ে ফেলবেন না।

অধ্যায় ১৩ — Form, Button ও UI Component Styling

Professional input, button, card, table ও reusable component।

Form design
.form-group {
    display: grid;
    gap: .5rem;
    margin-bottom: 1rem;
}

label {
    font-weight: 700;
}

input, select, textarea {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: .75rem;
    font: inherit;
}

input:focus, textarea:focus {
    border-color: #2563eb;
    outline: 3px solid #dbeafe;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border: 0;
    border-radius: .75rem;
    background: #2563eb;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.button:hover {
    background: #1d4ed8;
}
Professional habit: একই component-এর style বারবার না লিখে reusable class বানান।

অধ্যায় ১৪ — Transform, Transition ও Animation

Smooth interaction, loading animation এবং motion accessibility।

Hover করুন
Animation code
.card {
    transition:
        transform 200ms ease,
        box-shadow 200ms ease;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgb(15 23 42 / 15%);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader {
    animation: spin 800ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
পরামর্শ: Animation ছোট ও অর্থপূর্ণ রাখুন; অতিরিক্ত motion ব্যবহার করবেন না।

অধ্যায় ১৫ — CSS Variables, Functions ও Modern CSS

Custom properties, calc, min/max/clamp, aspect-ratio ও object-fit।

Modern CSS system
:root {
    --color-primary: #2563eb;
    --color-text: #172033;
    --space-1: .5rem;
    --space-2: 1rem;
    --radius: 1rem;
}

.button {
    background: var(--color-primary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
}

.sidebar {
    width: clamp(220px, 25vw, 320px);
}

.main {
    min-height: calc(100vh - 72px);
}

.thumbnail {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
}
সুবিধা: Variables ব্যবহার করলে পুরো design system এক জায়গা থেকে পরিবর্তন করা যায়।

অধ্যায় ১৬ — Architecture, Naming ও Best Practices

পরিষ্কার CSS file structure, BEM naming, reset এবং performance।

File structure

css/
├── reset.css
├── variables.css
├── layout.css
├── components.css
└── pages.css

BEM উদাহরণ

.card, .card__title, .card--featured

Clean starter CSS
/* 1. Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

body, h1, h2, h3, p {
    margin: 0;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* 2. Base */
body {
    min-height: 100vh;
    font-family: system-ui, sans-serif;
    line-height: 1.6;
}

/* 3. Layout */
.container {
    width: min(92%, 1200px);
    margin-inline: auto;
}

/* 4. Component */
.product-card { }
.product-card__title { }
.product-card--featured { }
এড়িয়ে চলুন: অতি লম্বা selector, অকারণে ID, অতিরিক্ত !important এবং একই style copy-paste।

অধ্যায় ১৭ — Debugging ও Browser DevTools

Style কেন কাজ করছে না তা বের করা এবং layout সমস্যা ঠিক করা।

CSS কাজ না করলে এই ক্রমে পরীক্ষা করুন

  1. CSS file-এর path ঠিক আছে কি?
  2. Selector HTML-এর class/id-এর সঙ্গে মিলেছে কি?
  3. Property বা value-তে spelling error আছে কি?
  4. অন্য rule specificity দিয়ে override করছে কি?
  5. DevTools-এর Styles ও Computed tab দেখুন।
  6. অস্থায়ীভাবে outline: 2px solid red দিয়ে box দেখুন।
Debug helper
/* শুধু debugging-এর সময় */
* {
    outline: 1px solid rgb(255 0 0 / 20%);
}

.debug {
    background: rgb(255 255 0 / 20%);
}
DevTools: Element-এর উপর right-click → Inspect → Styles থেকে live CSS পরিবর্তন করুন।

অধ্যায় ১৮ — Mini Projects ও Final Challenge

শেখা যাচাই করার জন্য বাস্তব project এবং professional completion criteria।

Project 1

Profile Card

ছবি, নাম, bio, social link, hover effect এবং responsive width।

Project 2

Login Page

Centered form, focus state, password field, button ও mobile layout।

Project 3

Product Grid

CSS Grid, price badge, button, image ratio এবং card hover।

Project 4

Responsive Landing Page

Navbar, hero, feature cards, testimonial, pricing ও footer।

Final

৩-পেজ Website

Home, About ও Contact—একটি shared external stylesheet দিয়ে তৈরি করুন।

CSS সম্পূর্ণ ধরা হবে যখন: আপনি code copy না করে responsive ৩-পেজ website বানাতে পারবেন, mobile ও desktop-এ layout ঠিক থাকবে এবং DevTools দিয়ে নিজের ভুল ঠিক করতে পারবেন।

CSS Quick Reference

সবচেয়ে প্রয়োজনীয় property-এর দ্রুত তালিকা।

বিষয়Propertyউদাহরণ
লেখার রংcolorcolor: #2563eb;
Backgroundbackgroundbackground: #f8fafc;
Font sizefont-sizefont-size: 1.25rem;
ভেতরের জায়গাpaddingpadding: 1rem;
বাইরের জায়গাmarginmargin: 0 auto;
Borderborderborder: 1px solid #ddd;
গোল cornerborder-radiusborder-radius: 1rem;
ছায়াbox-shadowbox-shadow: 0 10px 30px #0002;
Flexdisplaydisplay: flex;
Griddisplaydisplay: grid;
Alignmentjustify-contentjustify-content: center;
Responsive@media@media (min-width: 768px) { ... }

Final Quiz

নিজে উত্তর দিয়ে CSS জ্ঞান যাচাই করুন।

১. External CSS যুক্ত করতে কোন tag?
২. Class selector কী দিয়ে শুরু হয়?
৩. Flex item মাঝখানে নিতে কোনটি লাগে?
৪. Responsive breakpoint লিখতে কী ব্যবহার হয়?
৫. CSS Grid চালু করার সঠিক code?