✅ CSS Fundamentals – Interview Questions & Answers 🎨🧠

1️⃣ What is the Box Model in CSS?
The box model describes how elements are rendered: 
Content -> Padding -> Border -> Margin
It affects spacing and layout.

2️⃣ What’s the difference between ID and Class selectors?
- #id: Unique, used once. 
- .class: Reusable across multiple elements. 
Example: 

#header { color: red; }  
.card { padding: 10px; }

3️⃣ How does CSS Specificity work? 
Specificity decides which styles are applied when multiple rules target the same element. 
Hierarchy: 
Inline > ID > Class > Element 
Example: 

<p id="one" class="two">Text</p>

#one has higher specificity than .two.

4️⃣ What is Flexbox?
A layout model for 1D alignment (row or column). 
Key properties: 
- display: flex
- justify-content, align-items,
flex-wrap

5️⃣ Difference between Flexbox and Grid?
- Flexbox: 1D layout (row/column). 
- Grid: 2D layout (rows & columns). 
Use Grid when layout needs both directions.

6️⃣ What are Media Queries? 
Used to create responsive designs based on screen size/device. 
Example: 

@media (max-width: 600px) {
  body { font-size: 14px; }
}

7️⃣ How do you center a div using Flexbox? 

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

8️⃣ What is the difference between position: relative and absolute?
- relative: positions relative to itself. 
- absolute: positions relative to the nearest positioned ancestor.

9️⃣ Explain z-index in CSS. 
Controls stacking order of elements. Higher z-index = appears on top.

🔟 How can you optimize CSS performance? 
- Minify files 
- Use shorthand properties 
- Combine selectors 
- Avoid deep nesting 
- Use external stylesheets

💬 Double Tap ❤️ For More