✅ 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?

 {
  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

Now, let's move to the next topic:

Web Basics Part 3 - CSS Basics

• CSS means Cascading Style Sheets
• It controls look and layout
• HTML gives structure
• CSS gives presentation

• How CSS works
• Browser reads HTML
• Browser applies CSS rules
• Rules match elements using selectors

• Basic CSS syntax
• selector
• property
• value

Example: Change paragraph text color and font size

p {
  color: blue;
  font-size: 16px;
}

• Selectors
• Element selector: p, h1, div
• Class selector: .card (reusable styles)
• ID selector: #header (unique elements)
• Group selector: h1, h2, h3

• Box Model
Every element is a box with:
• Content
• Padding
• Border
• Margin

• Colors
• Color names: red, black
• Hex: #000000, #ffffff
• RGB: rgb(255, 0, 0)
• RGBA: adds opacity
Best practice: Use hex or rgb, limit palette, maintain contrast

• Fonts
• font-family
• font-size
• font-weight
• line-height
Use rem for scalable text, add fallback fonts

Mini practice task:
Create a card layout with:
• Padding and margin
• Background color
• Font family
• Line height 😊

Double Tap ♥️ For More