Here’s a list of Top 20 CSS Interview Questions and Answers for experienced front-end developers, including concepts like Flexbox, Grid, Animations, Variables, and more.

---

✅ 1. What is the difference between relative, absolute, fixed, and sticky positioning in CSS?

Answer:

• Relative: Positions element relative to its normal position.
• Absolute: Positions element relative to its nearest positioned ancestor.
• Fixed: Positions element relative to the viewport (always fixed).
• Sticky: Element toggles between relative and fixed, depending on scroll position.

---

✅ 2. What is the difference between Flexbox and Grid?

Answer:

• Flexbox: One-dimensional layout (row or column).
• Grid: Two-dimensional layout (both rows and columns).

---

✅ 3. How does z-index work in CSS?

Answer:
z-index determines the stack order of elements. Higher values are displayed in front of lower values, but it only works on positioned elements (relative, absolute, fixed, or sticky).

---

✅ 4. What is the difference between min-width, max-width, and width?

Answer:

• width: Fixed width.
• min-width: Minimum width an element can shrink to.
• max-width: Maximum width an element can grow to.

---

✅ 5. What are CSS custom properties (variables)?

Answer:
CSS Variables are reusable values:

:root {
  --main-color: #3498db;
}
body {
  color: var(--main-color);
}

---

Top 20 CSS Interview Questions and Answers

✅ 6. Explain the calc() function in CSS.

Answer:
Used for dynamic calculations in CSS:

width: calc(100% - 50px);

---

✅ 7. What are media queries in CSS?

Answer:
Media queries make websites responsive:

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

---

✅ 8. How does object-fit work in CSS?

Answer:
Used with <img> or <video> to define how content fits:

img {
  object-fit: cover;
}

---

✅ 9. How do you create a CSS animation?

Answer:

@keyframes slidein {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
div {
  animation: slidein 1s ease-in-out infinite;
}

---

✅ 10. What is the difference between transform, transition, and animation in CSS?

• transform: Applies 2D/3D transformations (scale, rotate).
• transition: Smoothly animates changes in CSS properties.
• animation: Keyframe-based multiple state animation.

---

Top 20 CSS Interview Questions and Answers

✅ 11. What is specificity hierarchy in CSS?

Answer:
Inline styles > IDs > Classes/Pseudo-classes/Attributes > Elements/Pseudo-elements

---

✅ 12. How does inheritance work in CSS?

Answer:
Some properties like color, font, and line-height are naturally inherited. You can force inheritance using inherit.

---

✅ 13. What are pseudo-elements in CSS?

Answer:
They style parts of an element:

p::first-letter {
  font-size: 200%;
}

---

✅ 14. What is reflow and repaint in the browser?

• Reflow: When DOM changes affect layout (e.g., resizing, changing position).
• Repaint: When only styles like color or visibility change.

---

✅ 15. What is the difference between inline-block and block?

• block: Starts on a new line and takes full width.
• inline-block: Flows with text but accepts width/height.

---

Top 20 CSS Interview Questions and Answers

✅ 16. What is a BEM naming convention in CSS?

Answer:
BEM = Block Element Modifier:

.block {}
.block__element {}
.block--modifier {}

---

✅ 17. How do you make a website responsive with only CSS?

Answer:

• Use %, vw, vh, em, rem units
• Media queries
• Flexbox/Grid
• CSS variables

---

✅ 18. How can you prevent a layout shift or content jumping?

Answer:

• Define fixed widths/heights for media
• Use aspect-ratio
• Reserve space with placeholders

---

✅ 19. How do CSS transitions work?

Answer:

button {
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: blue;
}

---

✅ 20. What is clamp() in CSS?

Answer:
Provides a range of values with min, preferred, and max:

font-size: clamp(1rem, 2.5vw, 3rem);

---

Top 20 CSS Interview Questions and Answers

Top 20 CSS Interview Questions and Answers

Top 20 CSS Interview Questions and Answers