COMPLETE BEGINNER GUIDE
CSS Full Course
Notebook
Handwritten Notes Style — Webpage ko Sundar Banao!
16+Chapters
120+Code Examples
FREEComplete Course
Chapter 1: CSS kya hai?
Webpage ko style aur beauty dene wali language!
CSS kya hai?CSS ka full form hai Cascading Style Sheets. Yeh language HTML elements ko style karti hai — color, font, size, spacing, layout sab CSS se control hota hai. HTML = Structure. CSS = Design. JavaScript = Behavior.
Cascading
—>
Upar se neeche — parent ki style child par apply hoti hai. Conflict mein specific wala jeeta hai!
Style
—>
Colors, fonts, sizes, spacing, animations — sab appearance control karna.
Sheets
—>
Ek alag .css file mein styles likhte hain — ek file se poori website ka look change hota hai!
/* Basic CSS syntax */
selector {
property: value;
}
/* Real Example */
h1 {
color: red;
font-size: 32px;
text-align: center;
}
selector {
property: value;
}
/* Real Example */
h1 {
color: red;
font-size: 32px;
text-align: center;
}
Key Points:
CSS HTML ke bina kaam nahi karta — dono sath mein use hote hain.
Har CSS rule: selector (kisko) + property (kya) + value (kaisa).
Har declaration ke aakhir mein semicolon (;) zaroori hai!
Comments /* ... */ se likhte hain — browser ignore karta hai.
Page 1
Selectors
Chapter 2: CSS Selectors
Kaunse element ko style karna hai — selector decide karta hai!
/* 1. Element Selector */
p { color: blue; }
h1 { font-size: 36px; }
/* 2. Class Selector — dot (.) se */
.myClass { background: yellow; }
/* HTML: <p class="myClass"> */
/* 3. ID Selector — hash (#) se */
#myId { border: 2px solid red; }
/* HTML: <div id="myId"> */
/* 4. Universal Selector */
* { margin: 0; padding: 0; }
/* 5. Group Selector */
h1, h2, h3 { font-family: Arial; }
/* 6. Descendant — div ke andar wale p */
div p { color: green; }
p { color: blue; }
h1 { font-size: 36px; }
/* 2. Class Selector — dot (.) se */
.myClass { background: yellow; }
/* HTML: <p class="myClass"> */
/* 3. ID Selector — hash (#) se */
#myId { border: 2px solid red; }
/* HTML: <div id="myId"> */
/* 4. Universal Selector */
* { margin: 0; padding: 0; }
/* 5. Group Selector */
h1, h2, h3 { font-family: Arial; }
/* 6. Descendant — div ke andar wale p */
div p { color: green; }
| Selector | Example | Kya Karta Hai |
|---|---|---|
| Element | p { } | Sab <p> tags style honge |
| Class (.) | .box { } | class="box" wale sab elements |
| ID (#) | #header { } | id="header" wala ek element |
| Universal (*) | * { } | Page ke sab elements |
| Pseudo :hover | a:hover { } | Mouse hover par |
Key Points:
Class reusable — multiple elements par laga sakte ho. ID unique — sirf ek par.
Specificity: ID > Class > Element — zyada specific wala jeeta hai conflict mein!
!important sab ko override karta hai — sirf emergency mein use karo!
Page 2
Colors
Chapter 3: CSS Colors
Webpage mein rang laao!
/* Color likhne ke 5 tarike */
p { color: red; } /* Named color */
p { color: #ff0000; } /* HEX code */
p { color: rgb(255, 0, 0); } /* RGB */
p { color: rgba(255, 0, 0, 0.5); } /* RGBA — a=opacity */
p { color: hsl(0, 100%, 50%); } /* HSL */
/* Background */
div {
background-color: #f0f0f0;
background: linear-gradient(red, blue);
background: linear-gradient(90deg, #c0392b, #8e44ad);
}
p { color: red; } /* Named color */
p { color: #ff0000; } /* HEX code */
p { color: rgb(255, 0, 0); } /* RGB */
p { color: rgba(255, 0, 0, 0.5); } /* RGBA — a=opacity */
p { color: hsl(0, 100%, 50%); } /* HSL */
/* Background */
div {
background-color: #f0f0f0;
background: linear-gradient(red, blue);
background: linear-gradient(90deg, #c0392b, #8e44ad);
}
Colors Live:
#c0392b
#2980b9
#27ae60
#f39c12
#8e44ad
linear-gradient(90deg, red, purple, blue)
Key Points:
HEX sabse common — #RRGGBB. 00=0, ff=255 (max).
rgba() mein 4th value opacity — 0=transparent, 1=solid.
color = sirf text rang. Background ke liye background-color ya background!
Page 3
Box Model
Chapter 4: CSS Box Model
Har element ek box hai — yeh samjho to CSS aasan ho jaata hai!
Box Model kya hai?CSS mein har HTML element ek rectangular box hota hai. Is box mein 4 layers hain: Content (andar), Padding (cushion), Border (frame), Margin (bahar ki space).
MARGIN — Doosre elements se door karta hai
BORDER — Frame / Line
PADDING — Content aur border ke beech space
CONTENT
Text, Image — actual cheez yahan
Text, Image — actual cheez yahan
div {
width: 300px;
padding: 20px; /* Charon taraf */
padding: 10px 20px; /* top-bottom | left-right */
border: 2px solid black;
margin: 10px auto; /* auto = horizontally center */
box-sizing: border-box; /* HAMESHA LAGAO */
}
width: 300px;
padding: 20px; /* Charon taraf */
padding: 10px 20px; /* top-bottom | left-right */
border: 2px solid black;
margin: 10px auto; /* auto = horizontally center */
box-sizing: border-box; /* HAMESHA LAGAO */
}
box-sizing: border-box — HAMESHA LAGAO!* { box-sizing: border-box; } — pehli line mein likho. Is se padding aur border width ke andar count hoti hai — total size unexpected nahi hota!
Key Points:
margin: 0 auto — element center ho jaata hai (width zaroori hai).
Clock-wise shorthand: padding: top right bottom left
margin collapse — do adjacent vertical margins ek ho jaati hain!
Page 4
Typography
Chapter 5: CSS Typography — Fonts aur Text
Text ka look aur feel control karo!
p {
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
font-weight: bold; /* 100-900 ya bold/normal */
font-style: italic;
line-height: 1.6; /* Lines ke beech space */
letter-spacing: 2px;
text-align: center; /* left | right | center | justify */
text-decoration: underline; /* none | underline | line-through */
text-transform: uppercase; /* uppercase | lowercase | capitalize */
color: #333;
}
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
font-weight: bold; /* 100-900 ya bold/normal */
font-style: italic;
line-height: 1.6; /* Lines ke beech space */
letter-spacing: 2px;
text-align: center; /* left | right | center | justify */
text-decoration: underline; /* none | underline | line-through */
text-transform: uppercase; /* uppercase | lowercase | capitalize */
color: #333;
}
Font Size Units — Comparison:
px — fixed pixels (16px) — not scalable
em — parent relative (1.2em)
rem — root html relative (1.1rem) — BEST!
clamp(13px, 2.5vw, 20px) — RESPONSIVE!
Key Points:
rem use karo px se zyada — accessibility better hoti hai.
line-height: 1.5 ya 1.6 — reading ke liye most comfortable hai.
Google Fonts free — fonts.google.com se link tag copy karo <head> mein lagao!
Page 5
Display & Position
Chapter 6: Display aur Position
Element kahan dikhega aur kaisa behave karega!
/* Display */
div { display: block; } /* Full width, naya line */
span { display: inline; } /* Same line, content width */
.box { display: inline-block; } /* Inline + width/height */
.hide { display: none; } /* Bilkul gayab */
/* Position */
.a { position: static; } /* Default — normal flow */
.b { position: relative; } /* Apni jagah se move */
.c { position: absolute; } /* Parent ke relative */
.d { position: fixed; } /* Viewport mein fixed */
.e { position: sticky; } /* Scroll par chipak jaata */
/* Sticky navbar example */
header { position: sticky; top: 0; z-index: 100; }
div { display: block; } /* Full width, naya line */
span { display: inline; } /* Same line, content width */
.box { display: inline-block; } /* Inline + width/height */
.hide { display: none; } /* Bilkul gayab */
/* Position */
.a { position: static; } /* Default — normal flow */
.b { position: relative; } /* Apni jagah se move */
.c { position: absolute; } /* Parent ke relative */
.d { position: fixed; } /* Viewport mein fixed */
.e { position: sticky; } /* Scroll par chipak jaata */
/* Sticky navbar example */
header { position: sticky; top: 0; z-index: 100; }
visibility: hidden vs display: none?display: none = jagah bhi nahi leti — bilkul gayab! / visibility: hidden = invisible magar jagah leti rehti hai! / opacity: 0 = transparent — events bhi kaam karte hain!
Key Points:
position: sticky modern navbars ke liye — scroll karo, bar top par ruke!
absolute element ke liye parent mein position: relative dena zaroori hai!
z-index sirf positioned elements par kaam karta hai — kaun upar show hoga.
Page 6
Flexbox
Chapter 7: CSS Flexbox — 1D Layout
Row ya column mein elements perfectly arrange karo!
/* Parent container par */
.container {
display: flex;
flex-direction: row; /* row | column | row-reverse */
justify-content: space-between; /* Main axis alignment */
align-items: center; /* Cross axis alignment */
flex-wrap: wrap; /* Next line par wrap karo */
gap: 16px;
}
/* Child items par */
.item {
flex: 1; /* Equal space share karo */
flex: 0 0 200px; /* grow shrink basis */
}
/* Perfect centering — sirf yeh 3 lines! */
.center { display:flex; justify-content:center; align-items:center; }
.container {
display: flex;
flex-direction: row; /* row | column | row-reverse */
justify-content: space-between; /* Main axis alignment */
align-items: center; /* Cross axis alignment */
flex-wrap: wrap; /* Next line par wrap karo */
gap: 16px;
}
/* Child items par */
.item {
flex: 1; /* Equal space share karo */
flex: 0 0 200px; /* grow shrink basis */
}
/* Perfect centering — sirf yeh 3 lines! */
.center { display:flex; justify-content:center; align-items:center; }
justify-content values — Live:
space-between:
A
B
C
center:
A
B
C
Key Points:
justify-content = main axis (row mein horizontal). align-items = cross axis (row mein vertical).
flex: 1 — equal share. flex-wrap: wrap — responsive bina media query ke!
Flexbox 1D hai — row ya column. 2D layout ke liye CSS Grid use karo!
Page 7
CSS Grid
Chapter 8: CSS Grid — 2D Layout
Rows aur columns dono mein layout banao!
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-columns: repeat(3, 1fr); /* Same */
grid-template-columns: 200px 1fr 100px; /* Mixed sizes */
grid-template-rows: 80px auto 60px;
gap: 20px;
}
/* Items span karna */
.header { grid-column: 1 / 4; } /* 3 columns span */
.sidebar { grid-row: 2 / 4; } /* 2 rows span */
/* Magic responsive — media query nahi chahiye! */
.cards {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-columns: repeat(3, 1fr); /* Same */
grid-template-columns: 200px 1fr 100px; /* Mixed sizes */
grid-template-rows: 80px auto 60px;
gap: 20px;
}
/* Items span karna */
.header { grid-column: 1 / 4; } /* 3 columns span */
.sidebar { grid-row: 2 / 4; } /* 2 rows span */
/* Magic responsive — media query nahi chahiye! */
.cards {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
3-Column Grid:
1
2
3
4 (2 columns span)
5
Key Points:
fr = fraction — available space ka hissa. 1fr 2fr = 1/3 aur 2/3!
auto-fit + minmax() — sabse powerful responsive technique!
Grid 2D, Flexbox 1D — dono alag use cases ke liye hain. Combine bhi kar sakte ho!
Page 8
Responsive
Chapter 9: Responsive Design aur Media Queries
Mobile par bhi perfect dikhao!
Responsive kya hai?Responsive design matlab webpage sab screen sizes par acha dikhe — mobile, tablet, laptop. CSS @media rules se different screens ke liye alag styles likhte hain!
/* Mobile First — pehle mobile ke liye likho */
.container { width: 100%; padding: 16px; }
.grid { grid-template-columns: 1fr; } /* Mobile: 1 column */
/* Tablet (768px se bada) */
@media (min-width: 768px) {
.container { max-width: 720px; margin: 0 auto; }
.grid { grid-template-columns: 1fr 1fr; }
}
/* Desktop (1024px se bada) */
@media (min-width: 1024px) {
.container { max-width: 960px; }
.grid { grid-template-columns: repeat(3, 1fr); }
}
.container { width: 100%; padding: 16px; }
.grid { grid-template-columns: 1fr; } /* Mobile: 1 column */
/* Tablet (768px se bada) */
@media (min-width: 768px) {
.container { max-width: 720px; margin: 0 auto; }
.grid { grid-template-columns: 1fr 1fr; }
}
/* Desktop (1024px se bada) */
@media (min-width: 1024px) {
.container { max-width: 960px; }
.grid { grid-template-columns: repeat(3, 1fr); }
}
| Breakpoint | Size | Device |
|---|---|---|
| Default | 0 — 767px | Mobile Portrait |
| md | 768px+ | Tablet |
| lg | 1024px+ | Laptop/Desktop |
| xl | 1280px+ | Large Screen |
Key Points:
Mobile First best practice — chhoti screen se shuru karo!
HTML mein viewport meta tag zaroori hai — bina is ke media queries kaam nahi karti!
%, vw/vh, rem use karo fixed px se zyada — naturally responsive!
Page 9
Pseudo
Chapter 10: Pseudo-Classes aur Pseudo-Elements
Special states aur virtual elements!
/* Pseudo-Classes — colon (:) */
a:hover { color: red; } /* Mouse hover */
a:visited { color: purple; } /* Visited link */
input:focus { border: 2px solid blue; } /* Click focus */
button:active { transform: scale(0.95); } /* Click hote waqt */
li:first-child{ font-weight: bold; } /* Pehla item */
li:last-child { color: red; } /* Aakhri item */
li:nth-child(2){background: yellow; } /* 2nd item */
li:nth-child(odd){background:#f5f5f5;} /* Odd items — zebra stripes */
/* Pseudo-Elements — double colon (::) */
p::first-line { font-weight: bold; }
h2::before { content: '# '; color: green; }
h2::after { content: ' ✓'; }
::selection { background: #a8e6cf; }
a:hover { color: red; } /* Mouse hover */
a:visited { color: purple; } /* Visited link */
input:focus { border: 2px solid blue; } /* Click focus */
button:active { transform: scale(0.95); } /* Click hote waqt */
li:first-child{ font-weight: bold; } /* Pehla item */
li:last-child { color: red; } /* Aakhri item */
li:nth-child(2){background: yellow; } /* 2nd item */
li:nth-child(odd){background:#f5f5f5;} /* Odd items — zebra stripes */
/* Pseudo-Elements — double colon (::) */
p::first-line { font-weight: bold; }
h2::before { content: '# '; color: green; }
h2::after { content: ' ✓'; }
::selection { background: #a8e6cf; }
Key Points:
Pseudo-class = ek colon (:) — element ki state. Pseudo-element = double colon (::).
::before aur ::after mein content property zaroori hai — content: '' bhi kaam karta hai.
Table mein tr:nth-child(even) se zebra stripes — common aur clean pattern!
Page 10
Animations
Chapter 11: CSS Transitions aur Animations
Webpage ko alive banao — smoothly!
/* TRANSITION — state change smooth karo */
button {
background: blue;
transition: all 0.3s ease; /* property duration timing */
}
button:hover { background: darkblue; transform: scale(1.05); }
/* Card hover effect */
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.2); }
/* ANIMATION — custom keyframes */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.box { animation: fadeIn 1s ease forwards; }
.loader{ animation: spin 1s linear infinite; }
button {
background: blue;
transition: all 0.3s ease; /* property duration timing */
}
button:hover { background: darkblue; transform: scale(1.05); }
/* Card hover effect */
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.2); }
/* ANIMATION — custom keyframes */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.box { animation: fadeIn 1s ease forwards; }
.loader{ animation: spin 1s linear infinite; }
Key Points:
transition = 2 states ke beech. animation = complex, continuous ya sequence.
transform properties GPU se run hoti hain — smooth performance!
animation-iteration-count: infinite — loading spinners ke liye!
Page 11
Variables
Chapter 12: CSS Custom Properties (Variables)
Ek jagah se poori website ka look badlo!
/* :root mein global variables define karo */
:root {
--primary: #2c7a2c;
--secondary: #e67e22;
--font-size: 16px;
--radius: 8px;
--shadow: 0 4px 16px rgba(0,0,0,0.12);
}
/* var() se use karo */
button {
background: var(--primary);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* Dark Mode — sirf variables change karo! */
@media (prefers-color-scheme: dark) {
:root { --primary: #5dade2; }
}
:root {
--primary: #2c7a2c;
--secondary: #e67e22;
--font-size: 16px;
--radius: 8px;
--shadow: 0 4px 16px rgba(0,0,0,0.12);
}
/* var() se use karo */
button {
background: var(--primary);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* Dark Mode — sirf variables change karo! */
@media (prefers-color-scheme: dark) {
:root { --primary: #5dade2; }
}
CSS Variables ka fayda!Pehle website mein ek hi color 100 jagah likha hota tha. Koi change karna ho to sab jagah jana padta tha. Ab sirf :root mein ek jagah change karo — poori website update!
Key Points:
Variable naam -- (double dash) se shuru hota hai — CSS ka rule hai!
Default value: var(--color, blue) — variable na mile to blue use hoga.
JavaScript se bhi CSS variables change kar sakte hain — runtime theming possible!
Page 12
Backgrounds & Borders
Chapter 13: Backgrounds aur Borders
/* Background */
.hero {
background-image: url('bg.jpg');
background-size: cover; /* cover | contain | 100% */
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* Parallax! */
}
/* Borders */
.card {
border: 2px solid #333; /* width style color */
border-radius: 12px; /* Rounded corners */
border-radius: 50%; /* Perfect circle! */
box-shadow: 4px 4px 16px rgba(0,0,0,0.15);
border-style: solid | dashed | dotted | double;
}
.hero {
background-image: url('bg.jpg');
background-size: cover; /* cover | contain | 100% */
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* Parallax! */
}
/* Borders */
.card {
border: 2px solid #333; /* width style color */
border-radius: 12px; /* Rounded corners */
border-radius: 50%; /* Perfect circle! */
box-shadow: 4px 4px 16px rgba(0,0,0,0.15);
border-style: solid | dashed | dotted | double;
}
box-shadow Examples:
Light
Deep
Outline
50%
Key Points:
background-size: cover — image box fill kare, crop ho sakti hai.
border-radius: 50% — square element ko circle banao (width = height zaroori)!
Multiple box-shadows: box-shadow: shadow1, shadow2 — comma se separate karo!
Page 13
Overflow
Chapter 14: Overflow, Text-Overflow aur Cursor
/* Overflow — content zyada ho jaye to */
.box { overflow: visible; } /* Default — bahar nikal jaata */
.box { overflow: hidden; } /* Extra hide */
.box { overflow: scroll; } /* Scrollbar hamesha */
.box { overflow: auto; } /* Zaroorat par scrollbar */
/* Text ... truncation */
.one-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* ... dikhega */
}
/* Cursor */
.btn { cursor: pointer; } /* Hand */
.loading { cursor: wait; } /* Spinner */
.no { cursor: not-allowed; }/* Cross */
/* Smooth scroll */
html { scroll-behavior: smooth; }
.box { overflow: visible; } /* Default — bahar nikal jaata */
.box { overflow: hidden; } /* Extra hide */
.box { overflow: scroll; } /* Scrollbar hamesha */
.box { overflow: auto; } /* Zaroorat par scrollbar */
/* Text ... truncation */
.one-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* ... dikhega */
}
/* Cursor */
.btn { cursor: pointer; } /* Hand */
.loading { cursor: wait; } /* Spinner */
.no { cursor: not-allowed; }/* Cross */
/* Smooth scroll */
html { scroll-behavior: smooth; }
text-overflow: ellipsis — Live:
Key Points:
overflow: hidden — image ko card mein clip karne ke liye! border-radius ke sath!
Ellipsis ke liye teeno properties zaroori hain — white-space, overflow, text-overflow.
scroll-behavior: smooth — anchor links par click se smooth scroll!
Page 14
Specificity
Chapter 15: CSS Specificity aur Cascade
Conflict mein kaunsa style jeeta hai?
/* Specificity: (Inline, ID, Class, Element) */
p { color: blue; } /* (0,0,0,1) — weak */
.text { color: green;} /* (0,0,1,0) — class */
#main { color: red; } /* (0,1,0,0) — ID strong */
p.text { color: pink; } /* (0,0,1,1) */
p { color: gold !important; } /* Sab override! */
/* Same specificity — baad wala jeeta */
p { color: blue; } /* Yeh haar jaata */
p { color: red; } /* Yeh jeeta — baad mein */
p { color: blue; } /* (0,0,0,1) — weak */
.text { color: green;} /* (0,0,1,0) — class */
#main { color: red; } /* (0,1,0,0) — ID strong */
p.text { color: pink; } /* (0,0,1,1) */
p { color: gold !important; } /* Sab override! */
/* Same specificity — baad wala jeeta */
p { color: blue; } /* Yeh haar jaata */
p { color: red; } /* Yeh jeeta — baad mein */
| Type | Score | Example |
|---|---|---|
| Inline style | 1,0,0,0 | style="color:red" |
| ID | 0,1,0,0 | #myId { } |
| Class / attr | 0,0,1,0 | .myClass { } |
| Element | 0,0,0,1 | p { } h1 { } |
Key Points:
!important hamesha jeeta — magar code mushkil ho jaata hai, avoid karo!
ID selectors se bachne ki koshish karo — classes zyada flexible hain!
CSS file ka order matter karta hai — baad mein aane wali style override karti hai!
Page 15
FINAL PROJECT
Chapter 16: Complete CSS Example — Sab Mila Kar!
/* === style.css — Complete Modern Website === */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
--primary: #2c7a2c;
--radius: 10px;
--shadow: 0 4px 16px rgba(0,0,0,0.1);
}
body { font-family:'Roboto',Arial,sans-serif; background:#f5f5f5; }
header {
background: var(--primary); color: #fff;
display: flex; justify-content: space-between; align-items: center;
padding: 16px 32px; position: sticky; top: 0;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
gap: 20px; padding: 24px;
}
.card {
background: #fff; border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-6px); }
@media (max-width:768px) {
header { padding: 12px 16px; }
}
* { margin:0; padding:0; box-sizing:border-box; }
:root {
--primary: #2c7a2c;
--radius: 10px;
--shadow: 0 4px 16px rgba(0,0,0,0.1);
}
body { font-family:'Roboto',Arial,sans-serif; background:#f5f5f5; }
header {
background: var(--primary); color: #fff;
display: flex; justify-content: space-between; align-items: center;
padding: 16px 32px; position: sticky; top: 0;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
gap: 20px; padding: 24px;
}
.card {
background: #fff; border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-6px); }
@media (max-width:768px) {
header { padding: 12px 16px; }
}
Mubarak Ho! CSS Course Complete!HTML + CSS seekh liya — ab aap ek beautiful, responsive website bana sakte ho! Agla step: JavaScript — webpage ko interactive banao! Practice: CSS Battle, Frontend Mentor — try karo!
Page 16 — THE END
Post a Comment