Interview Prep Guide

CSS Interview Questions and Answers for Freshers to Experienced Developers

Prepare for CSS interviews with real questions on the box model, layout systems, specificity, responsiveness, and performance-minded styling.

Basic CSS Interview Questions

What is the CSS box model?
The box model describes how content, padding, border, and margin combine to determine the final rendered size and spacing of an element.
How does specificity work in CSS?
Specificity determines which selector wins when multiple CSS rules target the same element, based on selector weight and then source order.
How do position values like relative, absolute, fixed, and sticky differ?
They change how an element participates in normal document flow and how its offsets are calculated relative to parents, the viewport, or scrolling containers.
What is the difference between px, em, rem, and viewport units?
px is an absolute unit, while em and rem are relative to font sizes. Viewport units (vh/vw) are relative to the browser window size.

When would you choose Flexbox vs CSS Grid?
Use Flexbox for one-dimensional layout and alignment, and use Grid when you need stronger two-dimensional control over rows and columns.
How do responsive design and breakpoints work in practice?
Responsive design adapts layouts to different viewport sizes, and breakpoints apply layout changes where the design actually needs them rather than based only on device names.
How do z-index and stacking contexts work in CSS?
z-index only works within stacking contexts, and a new stacking context can isolate an element so it does not compete with layers outside that context in the way you might expect.
What is the difference between a pseudo-class and a pseudo-element?
A pseudo-class targets a state (like :hover), while a pseudo-element targets a specific part of an element (like ::before).

What causes layout jank or performance issues in CSS-heavy pages?
Heavy repaint/reflow triggers, expensive effects, unstable dimensions, and too much layout thrashing can all create jank or slow rendering.
How would you keep CSS maintainable in a growing application?
Use a clear styling strategy, predictable naming or scoping, reusable tokens, and avoid uncontrolled specificity growth.
How would you reduce layout shift and keep a page visually stable?
Reserve space for dynamic content, define image and media dimensions, avoid surprise layout injections, and load fonts and async content in ways that do not cause large reflows.
What are CSS Custom Properties (Variables) and when are they better than SASS variables?
CSS Variables are dynamic at runtime and part of the DOM, while SASS variables are compile-time only.

How would you fix a UI that works on your machine but breaks across screen sizes, browsers, and reused component contexts?
Start with layout constraints, box model behavior, specificity, and component assumptions before adding one-off overrides.

Build a responsive card or dashboard layout with clean spacing
Interviewers often care less about decorative polish and more about whether the layout is structurally correct. Good answers choose sensible layout primitives, use spacing consistently, and keep the CSS easy to reason about under changing viewport sizes.
Center a div both horizontally and vertically using different methods
This is a classic "ice-breaker" question. Strong solutions show display: grid; place-items: center; for the cleanest 1rd-line solution, or Flexbox for more common alignment. Knowing the transform: translate(-50%, -50%) method shows you understand absolute positioning too.
Build a responsive card or dashboard layout with consistent spacing and stable wrapping behavior
Interviewers usually prefer predictable layout logic over clever hacks. Strong answers explain why flexbox or grid was chosen, how spacing is kept consistent, and how the layout adapts without collapsing under different content sizes.