✅ Practice + Quiz · Lesson 40
Top 25 CSS Interview Questions
Top 25 CSS Interview Questions
Basics (Q1–8)
Q1. What does CSS stand for and what is it for?
Cascading Style Sheets — it controls the presentation (colours, layout, spacing, fonts) of HTML content, separating design from structure.
Q2. What are the three ways to add CSS?
Inline (style attribute), internal (<style> in the head), and external (a linked .css file — the recommended method).
Q3. What is a CSS selector?
A pattern that targets which HTML elements a rule applies to — e.g. element (
Q4. Difference between class and id selectors?
A class (
Q5. Difference between em and rem units?
Q6. What is the difference between px and % ?
Q7. How do you comment in CSS?
With
Q8. What is the difference between visibility: hidden and display: none?
Cascading Style Sheets — it controls the presentation (colours, layout, spacing, fonts) of HTML content, separating design from structure.
Q2. What are the three ways to add CSS?
Inline (style attribute), internal (<style> in the head), and external (a linked .css file — the recommended method).
Q3. What is a CSS selector?
A pattern that targets which HTML elements a rule applies to — e.g. element (
p), class (.box), or id (#main).Q4. Difference between class and id selectors?
A class (
.name) can be reused on many elements; an id (#name) is unique to one element and has higher specificity.Q5. Difference between em and rem units?
em is relative to the current element's font size; rem is relative to the root (html) font size — rem is more predictable.Q6. What is the difference between px and % ?
px is a fixed absolute unit; % is relative to the parent element's size, making it flexible/responsive.Q7. How do you comment in CSS?
With
/* comment */. CSS has no single-line // comment.Q8. What is the difference between visibility: hidden and display: none?
visibility: hidden hides the element but keeps its space; display: none removes it entirely (no space taken).
Box Model & Layout (Q9–16)
Q9. Explain the CSS box model.
Every element is a box of four layers: content, padding (inside space), border, and margin (outside space).
Q10. Difference between padding and margin?
Padding is space inside the border (around content); margin is space outside the border (between elements).
Q11. What does box-sizing: border-box do?
Makes width/height include padding and border, so the declared size is the actual rendered size — preventing overflow surprises.
Q12. What is margin collapse?
When two vertical margins meet, they combine into the larger single margin rather than adding together.
Q13. Explain the position values.
static (default), relative (nudged from normal spot, anchors absolute children), absolute (positioned to nearest positioned ancestor), fixed (pinned to screen), sticky (scrolls then sticks).
Q14. What is the difference between flexbox and grid?
Flexbox is one-dimensional (a row OR column); grid is two-dimensional (rows AND columns together).
Q15. How do you center a div both horizontally and vertically?
Q16. What does z-index do and what's its main gotcha?
It controls stacking order (which element is on top). Its gotcha: it only works on positioned elements (not position: static).
Every element is a box of four layers: content, padding (inside space), border, and margin (outside space).
Q10. Difference between padding and margin?
Padding is space inside the border (around content); margin is space outside the border (between elements).
Q11. What does box-sizing: border-box do?
Makes width/height include padding and border, so the declared size is the actual rendered size — preventing overflow surprises.
Q12. What is margin collapse?
When two vertical margins meet, they combine into the larger single margin rather than adding together.
Q13. Explain the position values.
static (default), relative (nudged from normal spot, anchors absolute children), absolute (positioned to nearest positioned ancestor), fixed (pinned to screen), sticky (scrolls then sticks).
Q14. What is the difference between flexbox and grid?
Flexbox is one-dimensional (a row OR column); grid is two-dimensional (rows AND columns together).
Q15. How do you center a div both horizontally and vertically?
display: flex; justify-content: center; align-items: center; on the parent.Q16. What does z-index do and what's its main gotcha?
It controls stacking order (which element is on top). Its gotcha: it only works on positioned elements (not position: static).
Advanced (Q17–25)
Q17. What is CSS specificity?
A ranking of how targeted a selector is (inline > id > class > element) that decides which conflicting rule wins.
Q18. What is the CSS cascade?
The system deciding which rule applies when several conflict, based on importance, specificity, and source order.
Q19. When should you use !important, and why avoid it?
Only as a last resort — it overrides all specificity, breaks the natural cascade, and leads to escalating override wars.
Q20. Difference between a pseudo-class and a pseudo-element?
A pseudo-class (
Q21. What is the difference between transition and animation?
A transition animates between two states on a trigger; an animation (with @keyframes) can run automatically, have many steps, and loop.
Q22. What makes a website responsive?
The viewport meta tag, fluid layouts (%, flex, grid), flexible images (max-width: 100%), and media queries for breakpoints.
Q23. What is a media query? Write one.
Conditional CSS applied at certain screen sizes:
Q24. What are CSS variables and how do you use them?
Custom properties declared with
Q25. How do you make text truncate with an ellipsis?
A ranking of how targeted a selector is (inline > id > class > element) that decides which conflicting rule wins.
Q18. What is the CSS cascade?
The system deciding which rule applies when several conflict, based on importance, specificity, and source order.
Q19. When should you use !important, and why avoid it?
Only as a last resort — it overrides all specificity, breaks the natural cascade, and leads to escalating override wars.
Q20. Difference between a pseudo-class and a pseudo-element?
A pseudo-class (
:hover, single colon) targets a state/position; a pseudo-element (::before, double colon) creates a virtual element to style.Q21. What is the difference between transition and animation?
A transition animates between two states on a trigger; an animation (with @keyframes) can run automatically, have many steps, and loop.
Q22. What makes a website responsive?
The viewport meta tag, fluid layouts (%, flex, grid), flexible images (max-width: 100%), and media queries for breakpoints.
Q23. What is a media query? Write one.
Conditional CSS applied at certain screen sizes:
@media (max-width: 768px) { ... }.Q24. What are CSS variables and how do you use them?
Custom properties declared with
--name: value (usually in :root) and used with var(--name) — great for theming.Q25. How do you make text truncate with an ellipsis?
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; together.
Interview Tips
A few pointers for CSS interviews and vivas:
• Explain with the box model: many questions trace back to it — knowing content/padding/border/margin cold impresses.
• Mention real use cases: don't just define flexbox — say "I'd use it for a navigation bar." Practical context shows real understanding.
• Know the "why," not just the "what": why border-box (avoids overflow math), why rem (accessibility), why classes over ids (reusability).
• Be honest about DevTools: saying "I'd inspect it in DevTools to see which rule wins" shows you debug like a real developer.
• The evergreen favourites: box model, specificity, flexbox vs grid, and centering come up in nearly every front-end interview — have crisp answers ready.
You've now covered every one of these topics across this CSS course. Revisit the relevant chapter for any question you're unsure about, and practise explaining each concept out loud in your own words.
• Explain with the box model: many questions trace back to it — knowing content/padding/border/margin cold impresses.
• Mention real use cases: don't just define flexbox — say "I'd use it for a navigation bar." Practical context shows real understanding.
• Know the "why," not just the "what": why border-box (avoids overflow math), why rem (accessibility), why classes over ids (reusability).
• Be honest about DevTools: saying "I'd inspect it in DevTools to see which rule wins" shows you debug like a real developer.
• The evergreen favourites: box model, specificity, flexbox vs grid, and centering come up in nearly every front-end interview — have crisp answers ready.
You've now covered every one of these topics across this CSS course. Revisit the relevant chapter for any question you're unsure about, and practise explaining each concept out loud in your own words.
Basics (Q1–8)
Q1. CSS का full form क्या है और यह किसलिए है?
Cascading Style Sheets — यह HTML content की presentation (colours, layout, spacing, fonts) control करता है, design को structure से अलग करते.
Q2. CSS जोड़ने के तीन तरीके क्या हैं?
Inline (style attribute), internal (head में <style>), और external (linked .css file — recommended तरीका).
Q3. CSS selector क्या है?
एक pattern जो target करता है rule किन HTML elements पर लगे — जैसे element (
Q4. class और id selectors में अंतर?
Class (
Q5. em और rem units में अंतर?
Q6. px और % में क्या अंतर है?
Q7. CSS में comment कैसे करते हैं?
Q8. visibility: hidden और display: none में क्या अंतर है?
Cascading Style Sheets — यह HTML content की presentation (colours, layout, spacing, fonts) control करता है, design को structure से अलग करते.
Q2. CSS जोड़ने के तीन तरीके क्या हैं?
Inline (style attribute), internal (head में <style>), और external (linked .css file — recommended तरीका).
Q3. CSS selector क्या है?
एक pattern जो target करता है rule किन HTML elements पर लगे — जैसे element (
p), class (.box), या id (#main).Q4. class और id selectors में अंतर?
Class (
.name) कई elements पर reuse हो सकती है; id (#name) एक element के लिए unique है और higher specificity रखता है.Q5. em और rem units में अंतर?
em current element की font size के सापेक्ष; rem root (html) font size के सापेक्ष — rem ज़्यादा predictable है.Q6. px और % में क्या अंतर है?
px fixed absolute unit है; % parent element के size के सापेक्ष है, इसे flexible/responsive बनाते.Q7. CSS में comment कैसे करते हैं?
/* comment */ से. CSS में single-line // comment नहीं है.Q8. visibility: hidden और display: none में क्या अंतर है?
visibility: hidden element छुपाता है पर उसकी space रखता है; display: none उसे पूरी तरह हटाता है (कोई space नहीं).
Box Model & Layout (Q9–16)
Q9. CSS box model समझाइए.
हर element चार layers का box है: content, padding (अंदर space), border, और margin (बाहर space).
Q10. padding और margin में अंतर?
Padding border के अंदर space (content के चारों ओर); margin border के बाहर space (elements के बीच).
Q11. box-sizing: border-box क्या करता है?
width/height में padding और border शामिल करता है, तो declared size ही असली rendered size है — overflow surprises रोकते.
Q12. margin collapse क्या है?
जब दो vertical margins मिलते हैं, वे जुड़ने के बजाय बड़े single margin में combine हो जाते हैं.
Q13. position values समझाइए.
static (default), relative (normal जगह से nudged, absolute children anchor करता), absolute (निकटतम positioned ancestor के सापेक्ष), fixed (screen पर pinned), sticky (scroll करके चिपकता).
Q14. flexbox और grid में क्या अंतर है?
Flexbox एक-आयामी (row YA column); grid दो-आयामी (rows AUR columns साथ).
Q15. div को horizontally और vertically दोनों center कैसे करते हैं?
Parent पर
Q16. z-index क्या करता है और इसका मुख्य gotcha?
यह stacking order control करता है (कौन ऊपर). Gotcha: यह सिर्फ positioned elements पर काम करता है (position: static पर नहीं).
हर element चार layers का box है: content, padding (अंदर space), border, और margin (बाहर space).
Q10. padding और margin में अंतर?
Padding border के अंदर space (content के चारों ओर); margin border के बाहर space (elements के बीच).
Q11. box-sizing: border-box क्या करता है?
width/height में padding और border शामिल करता है, तो declared size ही असली rendered size है — overflow surprises रोकते.
Q12. margin collapse क्या है?
जब दो vertical margins मिलते हैं, वे जुड़ने के बजाय बड़े single margin में combine हो जाते हैं.
Q13. position values समझाइए.
static (default), relative (normal जगह से nudged, absolute children anchor करता), absolute (निकटतम positioned ancestor के सापेक्ष), fixed (screen पर pinned), sticky (scroll करके चिपकता).
Q14. flexbox और grid में क्या अंतर है?
Flexbox एक-आयामी (row YA column); grid दो-आयामी (rows AUR columns साथ).
Q15. div को horizontally और vertically दोनों center कैसे करते हैं?
Parent पर
display: flex; justify-content: center; align-items: center;.Q16. z-index क्या करता है और इसका मुख्य gotcha?
यह stacking order control करता है (कौन ऊपर). Gotcha: यह सिर्फ positioned elements पर काम करता है (position: static पर नहीं).
Advanced (Q17–25)
Q17. CSS specificity क्या है?
Selector कितना targeted है उसकी ranking (inline > id > class > element) जो तय करती है कौन-सा टकराता rule जीते.
Q18. CSS cascade क्या है?
वह system जो तय करता है कई rules टकराने पर कौन-सा लगे, importance, specificity, और source order के आधार पर.
Q19. !important कब use करें, और क्यों टालें?
सिर्फ आखिरी उपाय के रूप में — यह सारी specificity override करता है, natural cascade तोड़ता है, और बढ़ते override wars की ओर ले जाता है.
Q20. pseudo-class और pseudo-element में अंतर?
Pseudo-class (
Q21. transition और animation में क्या अंतर है?
Transition trigger पर दो states के बीच animate करता है; animation (@keyframes के साथ) अपने आप चल सकता है, कई steps रख सकता, और loop कर सकता है.
Q22. website को responsive क्या बनाता है?
Viewport meta tag, fluid layouts (%, flex, grid), flexible images (max-width: 100%), और breakpoints के लिए media queries.
Q23. media query क्या है? एक लिखिए.
कुछ screen sizes पर लगने वाली conditional CSS:
Q24. CSS variables क्या हैं और कैसे use करते हैं?
Q25. text को ellipsis से truncate कैसे करते हैं?
Selector कितना targeted है उसकी ranking (inline > id > class > element) जो तय करती है कौन-सा टकराता rule जीते.
Q18. CSS cascade क्या है?
वह system जो तय करता है कई rules टकराने पर कौन-सा लगे, importance, specificity, और source order के आधार पर.
Q19. !important कब use करें, और क्यों टालें?
सिर्फ आखिरी उपाय के रूप में — यह सारी specificity override करता है, natural cascade तोड़ता है, और बढ़ते override wars की ओर ले जाता है.
Q20. pseudo-class और pseudo-element में अंतर?
Pseudo-class (
:hover, single colon) state/position target करता है; pseudo-element (::before, double colon) style करने को virtual element बनाता है.Q21. transition और animation में क्या अंतर है?
Transition trigger पर दो states के बीच animate करता है; animation (@keyframes के साथ) अपने आप चल सकता है, कई steps रख सकता, और loop कर सकता है.
Q22. website को responsive क्या बनाता है?
Viewport meta tag, fluid layouts (%, flex, grid), flexible images (max-width: 100%), और breakpoints के लिए media queries.
Q23. media query क्या है? एक लिखिए.
कुछ screen sizes पर लगने वाली conditional CSS:
@media (max-width: 768px) { ... }.Q24. CSS variables क्या हैं और कैसे use करते हैं?
--name: value से declare किए custom properties (आमतौर पर :root में) और var(--name) से use किए — theming के लिए बढ़िया.Q25. text को ellipsis से truncate कैसे करते हैं?
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; साथ में.
Interview Tips
CSS interviews और vivas के लिए कुछ pointers:
• Box model से समझाइए: कई सवाल इसी पर लौटते हैं — content/padding/border/margin पक्का जानना प्रभावित करता है.
• असली use cases बताइए: सिर्फ flexbox define मत कीजिए — कहिए "मैं इसे navigation bar के लिए use करूंगा." Practical context असली समझ दिखाता है.
• "क्यों" जानिए, सिर्फ "क्या" नहीं: border-box क्यों (overflow math टालता), rem क्यों (accessibility), ids पर classes क्यों (reusability).
• DevTools के बारे में ईमानदार रहिए: "मैं DevTools में inspect करूंगा देखने को कौन-सा rule जीतता" कहना दिखाता है आप असली developer की तरह debug करते हैं.
• Evergreen favourites: box model, specificity, flexbox vs grid, और centering लगभग हर front-end interview में आते हैं — crisp जवाब तैयार रखिए.
आप अब इस CSS course में इनमें से हर topic cover कर चुके हैं. किसी भी सवाल पर unsure हों तो संबंधित chapter दोबारा देखिए, और हर concept अपने शब्दों में ज़ोर से समझाने का अभ्यास कीजिए.
• Box model से समझाइए: कई सवाल इसी पर लौटते हैं — content/padding/border/margin पक्का जानना प्रभावित करता है.
• असली use cases बताइए: सिर्फ flexbox define मत कीजिए — कहिए "मैं इसे navigation bar के लिए use करूंगा." Practical context असली समझ दिखाता है.
• "क्यों" जानिए, सिर्फ "क्या" नहीं: border-box क्यों (overflow math टालता), rem क्यों (accessibility), ids पर classes क्यों (reusability).
• DevTools के बारे में ईमानदार रहिए: "मैं DevTools में inspect करूंगा देखने को कौन-सा rule जीतता" कहना दिखाता है आप असली developer की तरह debug करते हैं.
• Evergreen favourites: box model, specificity, flexbox vs grid, और centering लगभग हर front-end interview में आते हैं — crisp जवाब तैयार रखिए.
आप अब इस CSS course में इनमें से हर topic cover कर चुके हैं. किसी भी सवाल पर unsure हों तो संबंधित chapter दोबारा देखिए, और हर concept अपने शब्दों में ज़ोर से समझाने का अभ्यास कीजिए.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.