CSS Interview Preparation

Prepare for CSS interview questions — from fundamentals to advanced topics, layout challenges, and practical coding exercises.

50 min•By Priygop Team•Last updated: Feb 2026

Common CSS Interview Questions

Box Model: Every element is a box — content + padding + border + margin. box-sizing: border-box makes width include padding and border (use universally)
Specificity: Inline > ID > Class > Element. Same specificity = last one wins. !important overrides all (avoid). CSS Layers override specificity order
Flexbox vs Grid: Flexbox is 1-dimensional (row OR column) — use for component-level alignment. Grid is 2-dimensional (rows AND columns) — use for page-level layouts
Position: static (default), relative (offset from normal), absolute (relative to positioned ancestor), fixed (relative to viewport), sticky (switches from relative to fixed on scroll)
CSS Cascade: Origin (user-agent, user, author) → Specificity → Source order. Cascade Layers insert between origin and specificity. Understanding cascade prevents specificity wars
Pseudo-classes vs Pseudo-elements: :hover, :focus, :nth-child are pseudo-classes (state). ::before, ::after, ::placeholder are pseudo-elements (virtual elements). Double colon for elements

Center a div: Flexbox (display: flex; align-items: center; justify-content: center), Grid (display: grid; place-items: center), or transform (position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%))
Stacking Context: Created by position + z-index, opacity < 1, transform, filter, will-change. z-index only works within the same stacking context — this is why z-index: 9999 sometimes doesn't work
BFC (Block Formatting Context): Created by overflow: hidden, display: flow-root, flex/grid children. BFC contains floats, prevents margin collapse. display: flow-root is the modern float-clearing solution
Responsive Images: srcset for resolution switching, sizes for viewport-based selection, <picture> for art direction. Use aspect-ratio to prevent layout shifts during loading
CSS Containment: contain: layout style paint — tells browser this element is independent. Enables rendering optimizations. content-visibility: auto skips off-screen rendering