Frontend Interview Handbook3 min readPremium

CSS Interview Questions with Solutions

CSS frontend interview questions with answers

In most frontend interviews, you’re unlikely to get only CSS questions. Like HTML, CSS is often mixed into broader coding challenges that combine HTML, CSS, and JavaScript, especially when building or debugging a React component. MDN’s CSS reference is a good companion as you work through these CSS interview questions.

That said, CSS-specific questions still arise, and it’s essential to be familiar with them. This guide covers some of the most commonly asked CSS questions at a high level, along with clear examples and explanations.

1. What is the CSS box model?

The box model is the method by which every HTML element is rendered on the page. It includes:

  • Content: The inner text or image
  • Padding: Space between content and border
  • Border: The element’s edge
  • Margin: Space outside the border

2. What are some limitations of styling with CSS?

  • Global namespace (unless using scoped styles)
  • Limited logic (e.g., no conditionals or loops)
  • More complicated to manage in large apps without structure
  • Specificity wars and overrides

3. How do you center an element in CSS?

For horizontal and vertical centering using Flexbox:

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

For text:

text-align: center;

4. What is a CSS preprocessor?

CSS preprocessors, such as Sass or Less, enable you to utilize variables, nesting, mixins, and functions within CSS. They compile down to plain CSS.

5. What are vh and vw in CSS?

vh = 1% of viewport height. vw = 1% of viewport width.

height: 100vh; /* Full height of the screen */
width: 50vw;  /* Half the screen width */

6. What’s the difference between reset and normalize CSS?

Reset.css removes all default styling. Normalize.css keeps useful defaults and fixes inconsistencies between browsers.

7. What’s the difference between inline, inline-block, and block?

  • inline: No line break, no box model properties respected
  • inline-block: No line break, but respects width/height/margin/padding
  • block: Line break, takes up full width

8. What are pseudo-elements and pseudo-classes?

  • Pseudo-classes: Apply styles based on element state (e.g. :hover, :first-child)
  • Pseudo-elements: Target parts of elements (e.g. ::before, ::after)

9. What’s the difference between padding and margin?

  • Padding: Space between content and border
  • Margin: Space between elements and other elements

10. What is z-index in CSS?

z-index Controls the stacking order of elements. Higher values appear on top.

11. What’s the difference between Flexbox and Grid?

  • Flexbox: One-dimensional (row or column)
  • Grid: A two-dimensional layout system

12. Explain the position property in CSS

  • static (default)
  • relativeOffsets from the normal position
  • absolutePositions relative to the nearest positioned ancestor
  • fixedPositions relative to the viewport
  • stickySwitches between relative and fixed, based on scroll

13. When does DOM reflow or repaint occur?

Reflow: When layout changes (e.g., resize, content change, font change)

Repaint: When visual changes occur without affecting layout (e.g., color, visibility)

14. How is CSS specificity calculated?

Specificity determines which rule wins. Basic formula:

  • Inline styles (e.g. style="") = 1000
  • ID selectors = 100
  • Class, attribute, pseudo-class = 10
  • Element and pseudo-elements = 1

15. IDs vs Classes: Which should you use?

Prefer classes for styling. Use IDs only when targeting a unique element, like in JavaScript or anchors.

16. What is !important In CSS?

!important Forces a rule to override any others, regardless of specificity.

Use sparingly. It makes debugging harder and breaks the cascade. It’s better to use specificity vs !important in most cases.

Final Thoughts

CSS often appears quietly in frontend interviews, not as standalone questions, but rather as part of UI-building tasks or discussions about layout, styling, and responsiveness.

Understanding core concepts, such as the box model, positioning, flex vs. grid, and specificity, will give you an edge. Especially when paired with clear communication and clean code.

Next, we will delve into the Data Structures and algorithms required for Frontend Interviews.