4+ Years experience Level CSS interview Question and Answers

 1. CSS Specificity Kya Hoti Hai?

Decide karta hai kaunsa style apply hoga

 Priority:

Inline > ID > Class > Element

 Example:

#id { color: red; }
.class { color: blue; }

 Output → red (ID wins)

---

2. Box Model Kya Hai?

 Element ka structure:

Content → Padding → Border → Margin

Important:

box-sizing: border-box;

Width me padding + border include ho jata hai

---

3. Flex vs Grid Difference?

• Flex → 1D layout
• Grid → 2D layout

 Real world:

• Navbar → Flex
• Dashboard → Grid

---

4. Position Properties Explain Karo

• static → default
• relative → apni position se move
• absolute → parent (relative) ke respect me
• fixed → viewport pe fix
• sticky → scroll pe stick

---

5. Z-index Kaise Kaam Karta Hai?

 Layering control karta hai

Important:

• Sirf positioned elements pe kaam karta hai
• position: relative/absolute hona chahiye

---

6. Display None vs Visibility Hidden

Property	Space	Visible
none	❌ Remove	❌
hidden	✅ Space rehta	❌

---

7. Inline vs Block vs Inline-block

Type	Width	Line Break
block	Full	Yes
inline	Content	No
inline-block	Custom	No

---

8. Responsive Design Kaise Karte Ho?

 Techniques:

• Media queries
• Flexbox / Grid
• %, rem units
• Mobile-first approach

---

9. Media Query Example

@media (max-width: 768px) {
  body {
    background: red;
  }
}

---

10. CSS Preprocessors Kya Hai?

 Tools:

• Sass / SCSS
• Less

 Features:

• Variables
• Nesting
• Mixins

---

11. Pseudo Classes vs Pseudo Elements

• :hover, :focus → pseudo-class
• ::before, ::after → pseudo-element

---

12. How to Center a Div?

 Flex way:

display: flex;
justify-content: center;
align-items: center;

---

13. What is BEM?

 Naming convention:

block__element--modifier

Example:

card__title--large

---

 14. Difference: em vs rem

• em → parent based
• rem → root based (best)

---

15. Overflow Kya Hai?

overflow: hidden / scroll / auto;

👉 Content control karta hai

---

16. Important: Reflow vs Repaint

• Reflow → layout change (heavy)
• Repaint → color change (light)

---

17. What is CSS Variable?

:root {
  --main-color: red;
}

p {
  color: var(--main-color);
}

---

18. What is Object-fit?

 Image control:

object-fit: cover;

---

19. What is Aspect Ratio?

aspect-ratio: 16/9;

 Responsive media ke liye

---

20. Advanced Question (Important)

Why margin collapse hota hai?

Vertical margins combine ho jate hain

---

21. Difference: transform vs position

• transform → GPU optimized (fast)
• top/left → reflow trigger karta hai

---

22. Why use will-change?

 Performance optimization:

will-change: transform;

---

23. What is stacking context?

Z-index ka internal system
Create hota hai when:

• position + z-index
• opacity < 1
• transform

---

24. How to optimize CSS?

• Minify CSS
• Avoid deep nesting
• Use classes instead of inline
• Reduce reflow

---

25. Real Interview Question

 Why your CSS not applying?

 Reasons:

• Specificity issue
• Wrong selector
• CSS not loaded
• Cache problem

---