Learn Web Development From Scratch
0️⃣ HTML / CSS
1️⃣ JavaScript
2️⃣ React / Vue / Angular
3️⃣ Node.js / Express
4️⃣ REST API
5️⃣ SQL / NoSQL Databases
6️⃣ UI / UX Design
7️⃣ Git / GitHub
Admin: @love_data
Post #3307
7.06K
✅ 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:
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:
4️⃣ What is Flexbox?
A layout model for 1D alignment (row or column).
Key properties:
⦁
⦁
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:
7️⃣ How do you center a div using Flexbox?
8️⃣ What is the difference between
⦁
⦁
9️⃣ Explain z-index in CSS.
Controls stacking order of elements. Higher
🔟 How can you optimize CSS performance?
⦁ Minify files
⦁ Use shorthand properties
⦁ Combine selectors
⦁ Avoid deep nesting
⦁ Use external stylesheets
💬 Double Tap ❤️ For More
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-wrap5️⃣ 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?
{
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 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
- ❤ 24
