CSS Interview Questions & Answers
Prepare for CSS technical interviews with 100 curated questions and answers — from fundamentals to Tech Lead. Layout, cascade, responsive design, and modern CSS. Each question includes a short interview answer, detailed explanation, examples, tips, and common mistakes.
CSS interview topics
Jump into a category — each bank is independent and interview-focused.
All CSS interview questions
Cascade interview questions
View categoryWhat is the CSS cascade?
freshExplain specificity in simple terms.
freshWhat does !important do, and when is it justified?
juniorAuthor vs user vs user-agent stylesheets?
juniorWhat are cascade layers (@layer)?
juniorHow does inheritance differ from the cascade?
midWhat is the difference between unset, revert, and revert-layer?
midHow do inline styles interact with classes?
midShadow DOM and the cascade — what changes?
midHow would you debug a style that 'won't apply'?
seniorWhat is @scope and why does it help?
seniorPresentational class soup vs semantic classes — cascade implications?
seniorDesign a cascade strategy for a multi-brand design system.
leadSelectors interview questions
View categoryWhat is the difference between .a .b and .a.b?
freshExplain child, sibling, and adjacent sibling combinators.
freshWhen do you use :is() vs :where()?
juniorWhat does :has() enable?
juniorAttribute selectors — equals vs contains vs prefix?
juniorPseudo-classes vs pseudo-elements?
midWhy prefer :focus-visible over :focus for outlines?
midHow do specificity traps happen with IDs in selectors?
midWhat are structural pseudo-classes like nth-child useful for?
seniorSelector performance myths — what matters today?
seniorHow do you style a form control only when invalid after interaction?
seniorExplain :not() limitations and nesting.
seniorEstablish selector conventions for a large codebase.
leadBox Model interview questions
View categoryExplain content-box vs border-box.
freshHow do margin, padding, and border differ?
freshWhat is margin collapse?
juniorWhat is a Block Formatting Context (BFC)?
juniorHow do width percentage and padding interact?
juniormin-width/max-width vs width — when?
midWhat does box-sizing inherit reset look like and trade-offs?
midHow do outlines differ from borders?
midExplain overflow, scroll containers, and sticky pitfalls.
seniorWhat is the visual viewport vs layout viewport conceptually?
seniorHow do you center a box horizontally and vertically (classic)?
seniorArchitect spacing tokens with the box model in mind.
leadFlexbox interview questions
View categoryWhat problem does flexbox solve?
freshmain axis vs cross axis?
freshExplain flex-grow, flex-shrink, and flex-basis.
juniorWhy does min-width: auto cause flex overflow?
junioralign-items vs align-content vs align-self?
juniorHow does flex-wrap change layout?
midgap in flexbox — why prefer it over margins?
midHow do you build a sticky footer with flex?
midorder property — uses and a11y concerns?
seniorflex shorthand pitfalls?
seniorWhen is flex better than float-based layouts?
seniorResponsive nav with flex — approach?
leadDesign flex utilities for a design system.
leadGrid interview questions
View categoryWhat problem does CSS Grid solve?
freshfr units vs % vs auto in tracks?
freshExplain grid-template-areas.
juniorauto-fit vs auto-fill?
juniorHow do implicit vs explicit grids differ?
junioralignment: justify-items vs justify-content in grid?
midHow do you overlap items intentionally?
midsubgrid — what is it for?
midminmax and responsive card grids pattern?
seniorGrid vs absolute positioning for dashboards?
seniorWhy does 1fr behave like minmax(auto, 1fr) and overflow?
seniorNamed lines — when useful?
leadDefine a page layout system with grid areas.
leadResponsive interview questions
View categoryWhat is responsive design vs adaptive design?
freshExplain mobile-first media queries.
freshViewport meta tag — what does it do?
juniorContainer queries vs media queries?
juniorFluid typography approaches?
juniorHow do you choose breakpoints?
midResponsive images in CSS context?
midCommon responsive nav patterns?
midWhat are svh, lvh, dvh?
seniorHow do prefers-reduced-motion and prefers-color-scheme fit responsive thinking?
seniorDebug a layout that breaks only between two widths.
seniorArchitect responsive tokens and breakpoints for a DS.
leadAnimations interview questions
View categorytransition vs animation — when each?
freshWhich properties are 'cheap' to animate?
freshExplain animation-fill-mode.
juniorHow do you respect prefers-reduced-motion?
junioreasing functions — why not always linear?
juniorHow do you debug a transition that doesn't run?
midWhat is @keyframes composition with multiple animations?
midScroll-driven animations — concept?
midGPU layers and will-change pitfalls?
seniorDesign motion guidelines for a product.
seniorHow do enter/exit animations work with display:none?
seniorFLIP technique at a high level?
leadPerformance interview questions
View categoryWhat CSS patterns cause layout thrashing?
freshHow does CSS affect rendering pipeline stages?
juniorCritical CSS strategy?
juniorSelector and stylesheet size — what to optimize?
juniorcontain and content-visibility benefits?
juniorFont loading performance with CSS?
midWhy are large box-shadows/filters costly?
midHow do you find unused CSS?
midCSS-in-JS runtime cost concerns?
seniorimage-set and CSS backgrounds performance?
seniorLong lists: CSS techniques to help?
seniorSet a CSS performance budget for a team.
lead