EnglishHinglish
Lessons available in both languages
MERN Stack · Interview Prep

CSS interview questions & answers

183+ real CSS interview questions with model answers, plus free lessons to learn the concepts. Prepare in English & Hinglish, then practise with an AI mock interview.

15 topics · 183+ questions

Hirenix kaise padhata hai

Ek chapter. 90 minute.
Interview ke liye taiyaar.

Har concept ek real-world problem se — jaisa production code mein aata hai, waisa. Ratna nahi padta, samajh aa jaata hai. Har question ka model answer diya hai: interviewer ko exactly kya bolna hai, aur kyun. Phir usi chapter ka AI mock interview.

  • 📖Concept, 5 min meinJargon nahi — seedhi baat
  • 🛠️Real-world problemJaisa production code mein aata hai
  • 💬Model answerInterview mein kya bolna hai
  • 🧠FlashcardsRevision 10 min mein
  • 🤖AI mock interviewFollow-up bhi poochta hai
  • 📊Weak topicsKahan phans rahe ho, pata chale
Ye chapter shuru karo — free🌐 English🇮🇳 Hinglish
A student learning an interview concept on Hirenix at home
Video playlistsyllabus ke hisaab se18h+
Hirenix chapterinterview ke hisaab se90 min

Farq content ka nahi, filter ka hai — sirf wahi jo production mein actually use hota hai aur interview mein actually poocha jaata hai. Kitaabi topics jo industry mein kahin nahi chalte, wo yahan nahi milenge.

EnglishHinglish
Lessons available in both languages

What you’ll learn

  • ●CSS kya hai?
  • ●Selectors aur specificity
  • Box modelFree account
  • Colors, typography, unitsFree account
  • FlexboxFree account
  • GridFree account
  • PositioningFree account
  • Responsive designFree account
  • Transitions aur animationsFree account
  • Pseudo-classes aur elementsFree account
  • CSS variables aur architectureFree account
  • RecapFree account
  • ●Project: Profile Card
  • Project: Responsive GalleryFree account
  • Project: Animated LandingFree account

CSS kya hai?

Socho ek ghar ka skeleton — deewarein, darwaze, khidkiyaan — jo pehle banta hai bricks aur beams se. Phir koi aata hai aur deewarein paint karta hai, curtains choose karta hai, furniture arrange karta hai. Skeleton bilkul wahi ghar hai chahe wo white paint ho ya blue, chahe curtains silk ke ho ya cotton ke — structure nahi badalta, sirf look badalta hai.

CSS mein, HTML skeleton banata hai (headings, paragraphs, buttons — structure) aur CSS wo layer hai jo decide karta hai ki wo skeleton kaisa dikhta hai: colours, spacing, fonts, layout. Same HTML markup, different CSS = ek bilkul alag dikhne wala page.

CSS teen tareekon se attach ki ja sakti hai: inline (ek style attribute seedha ek tag pe, jaise <p style="color: red;">), internal (ek <style> block HTML ke <head> ke andar, sirf us ek page ko style karta hai), aur external (ek alag .css file jo <link rel="stylesheet" href="styles.css"> se link hoti hai). External best practice hai — ek file poori site ke har page ko style kar sakti hai, browser use cache kar leta hai to repeat visits jaldi load hote hain, aur HTML (structure) CSS (presentation) se cleanly alag rehta hai.

Har CSS rule ke do parts hote hain: ek selector (kaunse element(s) ko target karna hai, jaise p) aur ek declaration block { } mein — ek ya zyada property: value; pairs, jaise color: red;.

🌍 Real-world example: do sites dono plain HTML <button> tag use karte hain, par ek small blue-outline button dikhata hai aur dusra ek bada rounded gradient button — same structure (HTML), different presentation (CSS).

💡 Cascade = jab ek se zyada rules ek hi element pe apply ho sakte hain, browser random pick nahi karta — wo sab matching rules ko "cascade" (jhaarne) karta hai aur ek winner chunta hai, ek line mein: zyada specific selectors aur baad mein likhe rules jeet jaate hain (jab tak !important override na kare).

Standard definition (interview me bolo): CSS (Cascading Style Sheets) is the language that describes how HTML elements are presented — layout, colours, fonts, spacing — and it can be added inline, internally, or via an external stylesheet, with an external stylesheet being standard practice.

<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="lead">Hello CSS</p>
  <p>A normal paragraph.</p>
</body>

/* styles.css */
p.lead {
  color: blue;
  font-size: 20px;
}

Selectors aur specificity

Socho tumhare desk pe office dress code ke baare mein teen memos aate hain: ek company-wide policy, ek department memo, aur ek note jo tumhare desk pe tumhare NAAM ke saath pinned hai. Agar ye conflict karein, to tum apne NAAM wale note ko follow karoge — wo sabse specific hai. Agar tumhara manager phir tumhe direct email kare, to wo naam wale note se bhi jeet jaata hai. Aur agar CEO ek memo pe "MANDATORY — no exceptions" stamp laga de, to wo sab kuch overrid kar deta hai, chahe baaki memos kitne bhi specific hon.

CSS mein, jab multiple rules same element ko target karte hain aur same property set karte hain, browser ko EK winner chunna padta hai — isko cascade kehte hain. Ye conflicts ko is order mein resolve karta hai: (1) !important sab kuch jeet jaata hai (isse avoid karo — ye normal order tod deta hai aur baad mein undo karna mushkil hota hai), (2) phir specificity — selector element ko kitni precision se target karta hai, (3) phir source order — agar specificity tie ho, to jo rule CSS mein LAST likha ho wo jeetega.

🌍 Real-world example: ek global stylesheet p { color: black; } set karta hai, ek component file .card p { color: gray; } set karta hai, aur ek designer ek paragraph ko #hero-text { color: blue; } se patch karta hai. Chahe id wala rule file mein PEHLE likha ho, phir bhi #hero-text jeetega — kyunki ID class se aur class element se jeetta hai, order se koi farak nahi padta.

💡 specificity = ek 4-part score (inline styles, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements) jo batata hai selector kitna targeted hai. Har part ko baayein se daayein compare karo — jo part zyada hai wo jeetega. 💡 selector types = div (type/element), .card (class), #hero (id), [type="text"] (attribute), :hover (pseudo-class), ::before (pseudo-element), aur combinators (div p descendant, div > p child, div + p adjacent sibling, div ~ p general sibling) jo selectors ko jodte hain — combinators khud ZERO specificity add karte hain, sirf jo selectors wo jodte hain wo hi count hote hain. 💡 inheritance = kuch properties (jaise color, font-family) apne aap parent se child mein pass ho jaati hain jab tak override na ho; box/layout properties (jaise margin, border, width) inherit NAHI hoti. inherit ek property ko parent ki computed value lene pe force karta hai, initial use CSS spec ke default pe reset karta hai, aur unset naturally-inherit hone wali properties ke liye inherit jaisa aur baaki ke liye initial jaisa behave karta hai.

Standard definition (interview me bolo): When CSS rules conflict, the browser resolves the winner using, in order: importance (!important), specificity (inline styles > ID > class/attribute/pseudo-class > element/pseudo-element, with the universal selector * counting zero specificity), and finally source order, where the last rule written wins ties.

<!-- HTML -->
<p class="text" id="hero">Hello, CSS!</p>

/* CSS, in source order */
* { color: black; }
p { color: gray; }
.text { color: green; }
#hero { color: blue; }
p { color: orange; }
p { color: red !important; }

Project: Profile Card

Kya bana rahe hain: Ek responsive profile card — ek avatar, naam, role, chhoti si bio, aur do link buttons, sab ek card ke andar. Card hover pe upar uthta hai aur shadow aata hai, aur bade screens pe avatar aur padding thoda badh jaate hain. Ye CSS chapter ka entry project hai — ye pehle do topics (what-is-css, selectors-and-specificity) ka sab kuch jodta hai aur aage aane wale ka preview deta hai: box model, flexbox, transitions, aur media queries — wo chaar cheezein jinse lagbhag har real UI banta hai.

Hum ise ek-ek chhota tukda karke banayenge: CSS likho, browser refresh karo, badalte dekho, PHIR agle tukde pe jao. Ye rahi wo chhoti si HTML jise hum style kar rahe hain — ye poore project mein nahi badalti:

<div class="card">
  <img class="card__avatar" src="avatar.jpg" alt="Profile photo of Aisha Khan" />
  <h2 class="card__name">Aisha Khan</h2>
  <p class="card__role">Frontend Developer</p>
  <p class="card__bio">Building accessible, fast web UIs. Open to remote roles.</p>
  <div class="card__links">
    <a class="card__link" href="#">GitHub</a>
    <a class="card__link" href="#">LinkedIn</a>
  </div>
</div>

Dhyaan do BEM-jaisi naming pe: card, card__avatar, card__name — har element ki ek class, har ek card tak scoped, to yahan kuch bhi baaki page se takrata nahi.

Step 1 — Universal box-sizing reset

*,
*::before,
*::after {
  box-sizing: border-box;
}

Ho ye raha hai: Kisi bhi real styling se pehle, lagbhag har serious project isse shuru hota hai. Box model wala fact yaad karo: box-sizing content-box default hai — matlab width sirf content area set karta hai, aur jo bhi padding/border tum add karo wo UPAR se JUD jaata hai, to width: 300px wale box mein 20px padding daalne pe wo asal mein 340px chauda render hota hai. Ye ek classic surprise hai, khaaskar jab hum Step 2 mein card mein padding add karte hain.

border-box isko palat deta hai: ab width ka matlab poora box hai (content + padding + border), to 20px padding wala 300px card abhi bhi 300px chauda render hota hai — padding content area ke andar hi khaata hai, upar nahi jodhta. Hum ise * (universal selector — zero specificity, to jo bhi zyada specific hai wo abhi bhi jeetega) plus ::before/::after pe lagate hain. In pseudo-elements ko alag se list karte hain kyunki box-sizing inherited property nahi hai — ek generated ::before/::after box apna alag box hota hai aur apne parent se border-box apne aap nahi le paata, isliye ise seedha match karna padta hai. Ye ek reset hi wajah hai ki iss project mein baaki sara sizing math "bas kaam karta hai."

Step 2 — Card container (box model)

.card {
  width: 100%;
  max-width: 320px;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: center;
}

Ho ye raha hai: width: 100% + max-width: 320px classic "flexible par capped" pattern hai — chhote phone pe card jitni jagah hai utni bhar leta hai, par bade screen pe kabhi 320px se zyada nahi badhta. margin: 2rem auto do kaam karta hai: 2rem top/bottom spacing ke liye, aur left/right ka auto wo mashhoor trick hai jo set width wale block-level element ko horizontally center karta hai — browser bachi hui horizontal space ko dono taraf barabar baant deta hai.

padding: 1.5rem card ke andar border aur content ke beech saans lene ki jagah hai — aur Step 1 ke border-box ki wajah se, ye padding ab card ko 320px se chauda nahi karta. border: 1px solid #e2e2e2 ek patli border kheenchta hai (width/style/colour ka shorthand), aur border-radius: 12px uske corners gol karta hai. background-color aur text-align: center khud-samjhi hain — par dhyaan do text-align un properties mein se ek hai jo inherit hoti hai, to har child text element center hoga jab tak wo khud override na kare.

Step 3 — Typography (text hierarchy)

.card__name {
  font-family: system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.75rem 0 0.25rem;
  color: #1a1a1a;
}
.card__role {
  font-size: 0.9rem;
  color: #666666;
  margin: 0 0 0.75rem;
}
.card__bio {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333333;
  margin: 0 0 1rem;
}

Ho ye raha hai: Teen text roles, teen sizes — ye hai visual hierarchy: naam sabse bada aur bold hai (1.25rem, font-weight: 600) taaki aankh pehle wahin jaaye, role chhota aur greyer hai (0.9rem, #666666) kyunki wo secondary info hai, aur bio ek comfortable reading size (0.95rem) use karti hai line-height: 1.5 ke saath — font-size ka 1.5× line height, ek widely-used comfortable-reading value (1.2 se kam tight lines cramped lagti hain; 1.6 se kaafi upar loose lagne lagta hai).

Hum har jagah rem use karte hain, px ya em nahi. Unit rule yaad karo: rem ROOT (<html>) ke font-size ke relative hai, to yahan har size predictably saath-saath scale hoti hai agar user apni accessibility ke liye browser ka base font-size badhaye — em yahan compound ho jaata unpredictably kyunki .card__bio .card ke andar nested hai, aur px to user preference ke saath bilkul scale hi nahi hota. font-family: system-ui, sans-serif ek font stack hai: pehle OS ka native UI font try karo, agar wo available na ho to kisi generic sans-serif pe fallback karo.

Step 4 — Flexbox: sab kuch ek column mein stack karna

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

Ho ye raha hai: Hum ye chaar lines usi .card rule mein Step 2 ke saath jodte hain. display: flex .card ko ek flex container bana deta hai, aur har direct child (img, h2, do ps, links wala div) ek flex item ban jaata hai. Default mein flex-direction row hoti hai, par hum ise column set karte hain — ab items side-by-side ke bajaye top-to-bottom stack hote hain.

Yahan wahi axis wali gotcha hai jiske baare mein ye chapter warn karta hai: justify-content hamesha main axis ko target karta hai aur align-items cross axis ko — aur flex-direction ko column karne se ye palat jaata hai ki kaunsa property kaunsi physical direction control karti hai. row mode mein main axis horizontal hota hai (to justify-content items ko left-right space karta); hamare column mode mein main axis ab VERTICAL hai, to yahan horizontal centering align-items control karta hai — isiliye align-items: center avatar/name/bio ko horizontally center karta hai, justify-content nahi. gap: 0.5rem har flex item ke beech barabar spacing daalta hai bina har child pe margin lagaye (aur, margin ke ulat, ye pehle item se pehle ya aakhri item ke baad extra space nahi jodhta).

Step 5 — Links row (nested flexbox) + avatar

.card__links {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}
.card__link {
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  background-color: #f0f0f0;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 0.85rem;
}
.card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

Ho ye raha hai: .card__links ek doosra, alag flex container hai, outer wale ke andar nested — flexbox nest karna theek chalta hai, har container sirf apne direct children ko manage karta hai. Ye default flex-direction: row hi rakhta hai, to dono link "buttons" side-by-side baithte hain; justify-content: center ab unhe (horizontal) main axis pe sahi se center karta hai, aur gap: 0.75rem dono links ko alag spacing deta hai.

Har .card__link ko padding + border-radius: 6px milta hai taaki chhota pill button jaisa dikhe, aur text-decoration: none anchor tags ka default underline hata deta hai. Avatar ke liye: width/height: 96px ise fixed square size deta hai, border-radius: 50% kisi bhi square box ko perfect circle bana deta hai, aur object-fit: cover <img> ko batata hai ki us 96px square ko bina stretch kiye bhar de — ye source photo ko crop karta hai, squish nahi karta.

Step 6 — Hover transition (card upar uthta hai, links invert hote hain)

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.card__link {
  transition: background-color 0.2s ease, color 0.2s ease;
}
.card__link:hover {
  background-color: #1a1a1a;
  color: #ffffff;
}

Ho ye raha hai: transition khud kuch animate nahi karta — ye bas browser ko batata hai "jab is property ki VALUE badle, to purani aur nayi value ke beech snap karne ke bajaye animate karo." Hum ise base .card aur .card__link rules pe lagate hain (:hover ke andar nahi), kyunki transition ko badlaav hone se pehle hi armed hona chahiye, taaki ye hover-OUT pe bhi smoothly chale, sirf hover-in pe nahi — agar hum ise sirf :hover ke andar likhte, to hover state chhodte hi wo turant snap wapas ho jaata.

.card:hover ek pseudo-class hai — ye sirf tab apply hota hai jab mouse card ke upar ho. transform: translateY(-4px) card ko 4px upar move karta hai (negative Y-translate); box-shadow: 0 8px 20px rgba(0,0,0,0.12) (x-offset, y-offset, blur, colour) ek soft shadow jodhta hai jo "page se uthta hua" lagta hai. Hum transform aur box-shadow animate karte hain, margin-top ya width nahi — is chapter ka rule-of-thumb hai transform/opacity sasti, GPU-friendly properties hain animate karne ke liye, jabki layout properties (width, top, margin) animate karne se browser ko har frame pe aas-paas ke elements ka layout dobara calculate karna padta hai, jo slow hai.

Wahi idea links pe: .card__link:hover pill ko light-grey se dark aur white text mein badal deta hai, aur kyunki transition: background-color 0.2s ease, color 0.2s ease base rule pe pehle se armed hai, wo colour swap 0.2s mein fade hoti hai, turant flash nahi hoti.

Step 7 — Ek media query (mobile-first responsiveness)

@media (min-width: 480px) {
  .card {
    padding: 2rem;
  }
  .card__avatar {
    width: 112px;
    height: 112px;
  }
}

Ho ye raha hai: Step 1–6 mein hamne jo likha wo saara mobile/base styling hai — ye chhote phone screen pe already theek chalta hai, width: 100% jitni bhi jagah hai use bhar leta hai. Ye hai mobile-first: chhoti-screen styles ko apna DEFAULT likho, phir @media (min-width: …) se aur jodo (bada padding, bada avatar) jab screen space milne lage — ulta nahi.

@media (min-width: 480px) ka matlab hai "is block ke andar wale rules sirf tab apply karo jab viewport kam se kam 480px chauda ho." Us width ke upar hum card ka padding 1.5rem se 2rem aur avatar 96px se 112px badhate hain — chhote, socha-samjha upgrades jab jagah bachi ho, koi redesign nahi. Ye 480px koi spec se di gayi "sahi" breakpoint nahi hai — breakpoints wahan chune jaate hain jahan TUMHARA content cramped ya sparse lagne lage, kisi fixed device-width table se nahi. Ek honest caveat: ye asal phone pe theek se kaam kare, iske liye HTML <head> mein <meta name="viewport" content="width=device-width, initial-scale=1"> (HTML chapter se) chahiye — iske bina mobile browsers ek wide desktop viewport fake karte hain aur media queries waise match nahi hoti jaisa tum expect karoge.

🔎 Poora flow (wiring recap)

  1. Browser card ko max-width: 320px pe paint karta hai, box-sizing Step 1 se pehle hi border-box hai, to padding ise kabhi chauda nahi karta.
  2. Flexbox (display: flex; flex-direction: column) avatar → name → role → bio → links ko top-to-bottom stack karta hai, align-items: center unhe horizontally centred rakhta hai (column mode mein ye CROSS axis hai).
  3. Nested .card__links flex container apne do <a> pills ko ek row mein lagata hai, gap ke saath centred.
  4. Mouse ko card ke upar le jao → :hover match hota hai → kyunki transition base rule pe pehle se armed hai, transform/box-shadow 0.2s mein smoothly "uthi hui" state mein animate hote hain; mouse hatao aur wahi transition ulta chalta hai.
  5. Kisi link pe hover karo → uska background-color/color dark/white pair mein fade hota hai, card ki apni hover state se alag.
  6. Browser ko 480px se aage resize karo → @media (min-width: 480px) block ke extra rules chalu ho jaate hain → padding aur avatar size thoda badh jaata hai. Wapas neeche resize karo → wo base values pe wapas aa jaate hain.

✅ Ye tumne seekha

  • Universal box-sizing reset — *, *::before, *::after { box-sizing: border-box } aur kyun content-box (asal default) hamara padding math todta.
  • Practice mein box model — padding/border/border-radius/margin: auto centring, aur border-box width ka matlab kaise badalta hai.
  • Typography hierarchy — rem sizing (em-compounding trap ke muqable), line-height, font-family stacks, primary/secondary text ke liye colour contrast.
  • Flexbox, do baar — ek outer column container (align-items yahan cross/horizontal axis control karta hai) aur ek inner nested row container (justify-content use center karta hai) — aur direction badalne se kyun property ka kaam badal jaata hai.
  • Hover transitions — transition ko BASE rule pe armed karo (:hover ke andar nahi) taaki dono directions animate hon; transform/box-shadow/background-color animate karo, layout properties nahi.
  • Ek asli media query — mobile-first: base styles chhoti-screen ka default hain, @media (min-width: 480px) zyada jagah milne pe refinements jodta hai, aur viewport <meta> tag kyun ek hard dependency hai.

Resume framing: "Built a responsive profile card component with plain CSS — a box-sizing reset, box-model layout, flexbox (nested containers on both axes), hover micro-interactions using transition/transform, and a mobile-first media query."

CSSinterview questions & answers

10 sample questions below — 183+ in the full bank inside.

`vw` aur `vh` units kis cheez ke relative hote hain?

`vw` viewport ki width ka 1% hai aur `vh` viewport ki height ka 1% hai — current browser window, kisi parent element ka nahi. To `5vw` hamesha browser window ki width ka 5% hota hai, chahe nesting kuch bhi ho.

In simple terms: Isko poori table ka percentage samjho, tum jis plate pe khade ho uska nahi — ye parents ko poori tarah ignore karta hai aur sirf window ki parwaah karta hai. Example: `.hero-title { font-size: 5vw; }` se heading ka text size user ke browser window resize karne pe badhta-ghatata hai.

`#ff0000` jaisa hex colour code actually kya represent karta hai?

Hex code ek packed RGB value hai — har do hex digits (00–ff) ek channel represent karte hain: red, green, phir blue. `#ff0000` full red hai, zero green, zero blue — matlab pure red. Ye compact hai kyunki red/green/blue ko chhe characters mein fit kar deta hai, `rgb(255, 0, 0)` likhne ke bajaye.

In simple terms: Isko teen do-digit dials samjho, har colour channel ke liye ek, jo `00` (off) se `ff` (full, decimal mein 255) tak jaate hain. Example: `#00ff00` full green hai kyunki sirf beech wala pair maxed out hai.

CSS mein colour specify karne ke common tareeke kya hain?

Named colours jaise `red` ya `steelblue` (readable but limited), hex codes jaise `#ff0000` (compact, sabse common), `rgb()` jo red/green/blue channel values leta hai, aur `hsl()` jo hue/saturation/lightness leta hai — haath se tweak karna sabse aasaan kyunki bas lightness slide kar sakte ho poora value recompute kiye bina.

In simple terms: Ek paint shop socho: paint naam se maang sakte ho ("sky blue"), exact recipe code se (hex), kitna red/green/blue light mix karna hai usse (rgb), ya hue/saturation/lightness dials ghuma ke (hsl). Example: `hsl(210, 80%, 40%)` ek mid-toned blue hai — bas aakhri number ko `70%` karo to hue chhue bina wo lighter ho jaata hai.

`font-family` value ek stack kyun hona chahiye jo generic jaise `sans-serif` pe khatam ho, sirf ek font naam kyun nahi?

Browser stack mein har font ko left se right try karta hai aur jo pehla available ho wo use karta hai. Aakhir mein ek generic family (`sans-serif`, `serif`, `monospace`) rakhne se guarantee milti hai ki har system pe koi reasonable fallback available ho, chahe custom font load na ho ya installed na ho.

In simple terms: Ye aisa hai jaise kisi ko preferred restaurants ki list order mein do — agar pehla band hai to agla try karo, aur aakhri option hamesha "koi bhi khula restaurant" hota hai. Example: `font-family: "Inter", "Segoe UI", sans-serif;` pehle Inter try karta hai, phir Segoe UI, phir browser ke paas jo bhi generic sans-serif font hai.

Margin collapse kya hai?

Jab do block-level elements normal flow mein seedhe upar-neeche baithe hote hain, unke touching top/bottom margins ADD nahi hote — wo ek single margin mein COLLAPSE ho jaate hain jo dono mein se BADE wale ke barabar hota hai, sum nahi. Padding aur border kabhi collapse nahi hote, sirf margins, aur wo bhi sirf vertically.

In simple terms: Do log socho jo dono 2 feet peeche hatte hain space dene ke liye — wo 4 feet door nahi ho jaate, kyunki unki 'personal space bubble' overlap hokar ek 2-feet gap ban jaati hai. Example: do stacked `<p>` elements jinme har ek mein `margin: 16px 0;` hai, unke beech 16px ka gap rehta hai, 32px nahi.

CSS box model ke chaar parts kya hain?

Har element four nested layers ki tarah render hota hai, andar se bahar: content (asli text/image), padding (border ke andar cushioning), border (box ki edge), aur margin (border ke bahar khaali jagah jo isse doosre boxes se alag karti hai).

In simple terms: Ek mithai box socho: mithai content hai, unko cushion karne wala tissue paper padding hai, cardboard khud border hai, aur is box aur agle box ke beech shelf pe jo gap chhodte ho wahi margin hai. Example: ek `<div>` jisme `padding: 10px; border: 2px solid; margin: 20px;` hai, uske text ke around ye chaaron layers stacked hain.

CSS mein box-sizing ki default value kya hai?

Default `content-box` hai. Iska matlab `width` aur `height` sirf content area ka size set karte hain — padding aur border uske upar add hote hain, isliye beginner ka box aksar unke set kiye width se chaura render hota hai.

In simple terms: Ye aisa hai jaise ek 'medium' pizza order karo par jo box usme aata hai wo pizza se bada hota hai — box ka size wo nahi hai jo tumne order kiya. Example: `div { width: 100px; padding: 10px; }` bina `box-sizing` set kiye, total width 120px render hoti hai, 100px nahi.

content-box aur border-box mein kya farak hai?

Ye `box-sizing` ki do values hain. `content-box` (default) mein `width`/`height` SIRF content measure karta hai, isliye padding aur border upar ADD ho jaate hain, jisse rendered box tumhare set kiye width se bada ho jaata hai. `border-box` mein `width`/`height` mein padding aur border shaamil hote hain, isliye rendered size exactly tumhare set kiye width ke barabar hota hai.

In simple terms: Content-box aisa hai jaise tum 8x10 photo frame khareedo aur frame ki lakdi uske around extra inches add kar de — wall space jo lega wo 8x10 se zyada hoga. Border-box aisa hai jaise ek frame kit jisme total frame guaranteed 8x10 hi hoga, chahe lakdi kitni bhi moti ho. Example: `width: 200px; padding: 20px; border: 5px solid;` content-box mein 250px render hota hai, lekin `box-sizing: border-box` ke saath exactly 200px.

Padding aur margin mein kya farak hai?

Padding border ke ANDAR ki space hai, border aur content ke beech — ye element ka part hai aur element ka background colour bhi apne saath leta hai. Margin border ke BAHAR ki space hai, element ko uske siblings se alag karti hai — ye hamesha transparent hoti hai aur kabhi koi background nahi dikhati.

In simple terms: Padding aisi hai jaise shipping box ke andar item ke around cushioning; margin wo gap hai jo tum us box aur truck ke agle box ke beech chhodte ho. Example: ek `<button>` jisme `background: blue; padding: 10px;` hai, blue color border tak dikhta hai, lekin `margin: 10px;` bas paas ke elements ko door karta hai wahan koi color nahi hota.

`font-weight` kaunse values accept karta hai, aur `400` aur `700` ka matlab kya hai?

`font-weight` numeric values leta hai (typically 100 ke steps mein, jaise `100`–`900`) ya keywords jaise `normal` aur `bold`. `400` `normal` weight hai aur `700` `bold` hai — keywords bas in do common numeric values ke aliases hain.

In simple terms: Isko thin se thick tak ek dial samjho, jisme `normal` aur `bold` do well-known stops hain, na ki sirf yehi do options hain. Example: `font-weight: 700;` aur `font-weight: bold;` same render hote hain, lekin ek font jo finer weights support karta hai wo `600` bhi use kar sakta hai normal aur bold ke beech kuch ke liye.

173+ more CSS questions inside

Create a free account to read the full question bank, learn every topic, and practise with an AI mock interview.

Unlock all questions — free

Ready to practise CSS?

Unlock every topic free, then face an AI interviewer that asks follow-ups and grades your answers.

Unlock all topics — freeTry a mock interview