CSS Interview Common Questions

CSS interview map — box model, cascade, Flex/Grid, positioning, and responsive patterns with prompts linked to deep dives.

beginner4 min readUpdated Aug 4, 2026

interview
css-interview

CSS interviews reward layout literacy, not memorizing every property. Can you center things on purpose, explain why specificity won, and choose Flex vs Grid without dogma?

What interviewers score

Box model — content vs border-box
Cascade — specificity, layers, inheritance
Layout systems — Flex, Grid, positioning
Responsive — fluid type, media/container queries
Painting — stacking, overflow, perf-sensitive properties

Box model & display

Topic	Can you…	Learn
Box model	Content, padding, border, margin	CSS box model
box-sizing	Why `border-box` is default in sane resets	border-box
display	block / inline / inline-block / flex / grid	display values
Margin collapse	When vertical margins collapse	box model + mental demo

Prompt: “Why is my 100% width element overflowing?” — borders/padding with content-box, min-content children, or horizontal margins.

Cascade & selectors

Topic	Can you…	Learn
Specificity	ID > class > type; inline; `!important` last resort	Cascade specificity · Deep dive
Cascade layers	`@layer` for framework vs app control	Cascade layers
Modern selectors	`:is`, `:where`, `:has`	:is :where :has
Pseudo	`:hover` / `:focus-visible`	Pseudo-classes
Pseudo-elements	`::before` icons without extra DOM	Pseudo-elements

Prompt: “Styles don’t apply — browser shows crossed-out rule.” Walk source order, specificity, then layers.

Flexbox

Topic	Can you…	Learn
Fundamentals	Main vs cross axis; wrap	Flexbox fundamentals
Alignment	`justify-` / `align-`	Flexbox alignment
grow/shrink/basis	How free space is distributed	flex-grow shrink basis
Gap	gap vs margin hacks	gap vs margin

Prompt: Equal-height cards in a row; then “last row left-aligned” → often Grid or flex + careful basis.

Grid

Topic	Can you…	Learn
Fundamentals	tracks, `fr`, placement	Grid fundamentals
vs Flex	2D vs 1D choice	Grid vs Flexbox
Areas	Named template areas	grid-template-areas
minmax / auto-fit	Responsive columns without MQ spam	minmax and fr · auto-fit vs auto-fill
Subgrid	Nested alignment	Subgrid

Positioning & stacking

Topic	Can you…	Learn
position	static/relative/absolute/fixed/sticky	Position
Sticky	Headers; overflow ancestors break sticky	Sticky headers
z-index	Stacking contexts	Stacking contexts
Centering	Multiple valid strategies	Centering

Responsive & theming

Topic	Can you…	Learn
Media queries	mobile-first; prefer ranges	Media queries modern
Container queries	Component-based breakpoints	Container queries
Fluid type	`clamp`	Fluid typography
Custom properties	Theming tokens	Custom properties · Theming
Color scheme	`prefers-color-scheme`	prefers-color-scheme
Reduced motion	Respect users	prefers-reduced-motion

Performance-ish CSS

Topic	Can you…	Learn
Cheap anims	transform/opacity	transform & opacity
will-change	Don’t spray it	will-change pitfalls
Containment	When `content-visibility` / contain help	talk + measure

Classic verbal questions

Question	Strong direction
BFC?	Mini-layout context; floats contained; margin collapse quirks
rem vs em?	Root vs parent; modular scales
Inline vs block?	Width/height, newlines, vertical margins
Grid or Flex?	2D page vs 1D component; often both
How does specificity work?	Calculate (a,b,c); layers change priority

Live layout prompt recipe

Restate: sidebar + main + sticky header
Grid for page; flex for toolbars
Call out overflow and narrow screens
Mention focus outlines and reduced motion if animating

Roadmap practice: CSS layout mastery path.