Top 30 CSS Interview Questions and Answers for 2025

CSS (Cascading Style Sheets) is a crucial technology for building beautiful, responsive websites. Whether you’re preparing for a front-end developer interview or refreshing your knowledge, here’s a handpicked list of top 30 CSS interview questions and answers every developer should know in 2025.

---

✅ 1. What is CSS?

CSS (Cascading Style Sheets) is a language used to style HTML documents. It controls layout, colors, spacing, fonts, and more.

---

✅ 2. What are the types of CSS?

• Inline CSS – Added directly to HTML elements.
• Internal CSS – Written inside a <style> tag in the head section.
• External CSS – Written in a separate .css file and linked using <link>.

---

Top 30 CSS Interview Questions and Answers for 2025

✅ 3. What is the Box Model in CSS?

The CSS box model consists of:

• Content
• Padding
• Border
• Margin

It describes how elements are sized and spaced.

---

✅ 4. What is the difference between id and class?

• ID is unique and uses #.
• Class can be reused and uses ..

#main { }  /* ID selector */
.container { }  /* Class selector */

---

✅ 5. What is specificity in CSS?

Specificity determines which style rule is applied when multiple rules match an element.
Order of priority:

1. Inline styles
2. ID selectors
3. Classes/pseudo-classes/attributes
4. Tag selectors

---

✅ 6. What is z-index?

z-index controls the stacking order of elements. Higher values are displayed above lower ones.

.modal {
  z-index: 999;
}

---

✅ 7. What is the difference between visibility: hidden and display: none?

• visibility: hidden: element is hidden but occupies space.
• display: none: element is removed from the document flow.

---

✅ 8. Explain the difference between em, rem, and px.

• px – absolute unit.
• em – relative to parent element’s font size.
• rem – relative to the root (html) font size.

---

✅ 9. What are pseudo-classes in CSS?

Pseudo-classes style elements based on state.

Examples:

• :hover
• :first-child
• :nth-child(3)

---

✅ 10. What is the difference between absolute, relative, fixed, and sticky?

Position	Description
relative	Relative to its normal position
absolute	Relative to the nearest positioned ancestor
fixed	Relative to the viewport
sticky	Switches between relative and fixed based on scroll

---

✅ 11. How does Flexbox work?

Flexbox is used for 1D layouts (row or column).

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

---

✅ 12. What is CSS Grid?

Grid is a 2D layout system for rows and columns.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

---

✅ 13. What is a pseudo-element?

Pseudo-elements style specific parts of an element.

Examples:

• ::before
• ::after

---

✅ 14. What are media queries?

Media queries make designs responsive by applying styles based on device width.

@media (max-width: 768px) {
  .menu { display: none; }
}

---

✅ 15. What are combinators in CSS?

Combinators define relationships between selectors:

• Descendant (div p)
• Child (div > p)
• Adjacent sibling (div + p)
• General sibling (div ~ p)

---

✅ 16. How do you center a div?

With Flexbox:

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

---

✅ 17. What is the default position in CSS?

The default position is static.

---

✅ 18. What is the use of calc() in CSS?

calc() allows mathematical expressions.

width: calc(100% - 50px);

---

✅ 19. What is the use of !important?

It overrides all other styles regardless of specificity.

color: red !important;

---

✅ 20. How can you hide elements only on mobile?

@media (max-width: 600px) {
  .hide-on-mobile {
    display: none;
  }
}

---

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

• inline – No width/height allowed.
• block – Takes full width.
• inline-block – Like inline, but supports width/height.

---

✅ 22. How do you make a triangle in CSS?

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid red;
}

---

✅ 23. What are vendor prefixes?

Used for cross-browser compatibility.

Examples:

• -webkit-
• -moz-
• -ms-

---

✅ 24. How do transitions work in CSS?

.button {
  transition: background 0.3s ease;
}

---

✅ 25. How are animations different from transitions?

• Transitions – From one state to another.
• Animations – Multiple states via keyframes.

@keyframes slide {
  from { left: 0; }
  to { left: 100px; }
}

---

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

• min-width: Smallest width allowed.
• max-width: Maximum width allowed.
• width: Fixed or relative width.

---

✅ 27. What does unset do?

It resets the property to inherited or initial depending on context.

---

✅ 28. What’s the stacking context?

A stacking context determines how elements are layered with z-index.

---

✅ 29. What is the difference between initial and inherit?

• initial: Resets to default browser value.
• inherit: Takes value from the parent element.

---

✅ 30. How do you use CSS variables?

:root {
  --main-color: #ff6600;
}
.button {
  background-color: var(--main-color);
}

---

✨ Final Thoughts

Mastering CSS is essential for every front-end developer. These 30 questions cover everything from basics to advanced topics, helping you crack interviews and level up your styling skills in 2025.