CSS interviews separate people who have memorised properties from people who know which algorithm is laying out the page. Almost every question below has a short answer that sounds complete and a second sentence that shows whether you have actually debugged it.
The recurring theme is that CSS is declarative: you describe an outcome and an engine resolves it. When something surprises you the question is never why CSS is like this, but which layout mode you are in and what its rules are.
Answer each one out loud before you open it. An answer you have read is not an answer you can give under pressure, which is the only kind that counts.
Q1 What does the cascade actually do?
It resolves conflicts between rules using origin and importance, then specificity, then source order.
Source order is the last tiebreak, not the first - which is why a later rule can still lose. Knowing the order is what stops the reflex of adding !important.
What it is really testing. Whether you know the order. Most answers mention only 'the last one wins', which is wrong most of the time.
Q2 How is specificity calculated?
Count ids, then classes and attributes and pseudo-classes, then elements - compared left to right.
Inline styles beat all of them. A single id outranks any number of classes, which is why ids in selectors make rules hard to override later.
What it is really testing. Whether you can compare two selectors on the spot. Expect to be given two and asked which wins.
Q3 When is !important acceptable?
Rarely - usually only in a utility class or to override a third-party stylesheet you cannot change.
It is a confession that something upstream is more specific than it needed to be. The sustainable fix is lowering that specificity, not escalating.
What it is really testing. Whether you treat it as a smell. A candidate who uses it routinely will have a stylesheet nobody can modify.
Q4 Which properties inherit?
Text-related ones such as color, font and line-height. Box-related ones such as margin, border and background do not.
The split is pragmatic: inheriting text settings is almost always wanted, inheriting a border would put a border on everything. inherit and initial override the default either way.
What it is really testing. Whether you know it is a rule rather than a list to memorise.
Q5 What does box-sizing: border-box do?
It makes width include padding and border rather than just the content.
The default content-box means a 300px element with padding and a border is wider than 300px. Border-box removes a whole category of arithmetic, which is why nearly every stylesheet sets it globally.
What it is really testing. Whether you know why it is not the default - breaking pages written twenty years ago.
Q6 What is margin collapse?
Adjacent vertical margins combine into the larger of the two rather than adding up.
It also happens between a parent and its first or last child when nothing separates them, so a child's margin appears to escape its parent. Padding, a border, or a flex or grid container stops it.
What it is really testing. Whether you have been caught by a margin escaping its parent. The parent-child case is the one that confuses people.
Q7 When do margins not collapse?
Inside flex and grid containers, on floated or absolutely positioned elements, and where padding or a border intervenes.
This is one reason modern layouts feel better behaved. If you have moved a section into a flex container and the spacing changed, this is why.
What it is really testing. Whether you can name the fix rather than just the symptom.
Q8 Flexbox or grid - how do you choose?
Flexbox for one dimension driven by content; grid for two dimensions driven by structure.
They are not rivals - a grid cell very often holds a flex container. A row of buttons is flex; a page layout or a card gallery is grid.
What it is really testing. Whether you treat them as complementary. Candidates who say one replaces the other have used only one.
Q9 What do justify-content and align-items do?
justify-content distributes along the main axis; align-items aligns across the cross axis.
flex-direction decides which is which, so in a column justify-content moves things vertically. That is why the two property names confuse people - they were never about horizontal and vertical.
What it is really testing. Whether you know flex-direction swaps which axis is which. That single fact resolves most confusion here.
Q10 What does flex: 1 mean?
Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0 - grow to fill, shrink if needed, ignore intrinsic width.
flex: auto uses the content width as the basis instead, so items keep their natural proportions. The difference explains most 'why are my flex items not equal' questions.
What it is really testing. Whether you know the flex-basis difference. 'flex: 1' versus 'flex: auto' is a common follow-up.
Q11 How do you build a responsive grid with no media queries?
repeat(auto-fill, minmax(260px, 1fr)) with a gap.
The browser fits as many columns as it can at the minimum width and shares the remainder. One line replaces several breakpoints and adapts to any container width.
What it is really testing. Whether you know the modern answer. Reaching for breakpoints here suggests you learned grid from old material.
Q12 What is the difference between auto-fill and auto-fit?
auto-fill keeps empty tracks; auto-fit collapses them so the remaining items stretch.
With few items the difference is visible: auto-fill leaves gaps on the right, auto-fit widens the items to fill the row. Which you want depends on whether alignment across rows matters.
What it is really testing. Whether you have used both. The difference only shows with fewer items than columns.
Q13 How do you centre an element in both directions?
display: grid with place-items: center, or flex with justify-content and align-items both centre.
The old difficulty was that normal flow has no concept of vertical centring, so people reached for absolute positioning and negative margins. Changing the layout mode removes the problem.
What it is really testing. Whether you know why it used to be hard. The history explains why so many old techniques exist.
Q14 What does position: relative actually do?
It offsets the element visually while leaving its space in the flow, and makes it a containing block for absolutely positioned children.
That second effect is the usual reason you see it applied with no offsets at all - it is there to anchor something inside it.
What it is really testing. Whether you know the containing-block effect. It is the reason for most real uses of the property.
Q15 Why is my z-index being ignored?
Because the element is in a different stacking context from the one you are comparing against.
A new context is created by a positioned element with z-index, and also by opacity below 1, transform, filter and will-change. A child cannot escape its parent's context, so a larger number never helps.
What it is really testing. Whether you look for the stacking context rather than raising the number. This is a strong signal either way.
Q16 What does position: sticky need to work?
A threshold - top, bottom, left or right - and a scrolling ancestor that is tall enough.
It silently does nothing if the offset is missing, which is the most common reason it 'does not work'. An ancestor with overflow hidden will also break it.
What it is really testing. Whether you know the silent failure modes. 'It just does not work' has two standard causes.
Q17 When would you use rem rather than px?
For anything the user might want to scale - type and spacing.
px ignores the browser's font size setting, so a reader who has increased it gets nothing. rem is relative to the root, so the whole layout scales together.
What it is really testing. Whether you think about the user's font settings. Accessibility rarely comes up unprompted.
Q18 What is the difference between em and rem?
em is relative to the current element's font size; rem to the root's.
em compounds when nested, which is useful inside a component - padding that scales with its own text - and dangerous globally, because three levels of nesting multiply.
What it is really testing. Whether you know em compounds. That is the practical difference and the source of surprising sizes.
Q19 What does clamp() do?
It sets a value with a minimum, a preferred formula and a maximum.
clamp(1.75rem, 1.2rem + 2vw, 3rem) gives fluid typography with a floor and a ceiling, replacing several breakpoints with one declaration.
What it is really testing. Whether you know fluid typography can replace breakpoints entirely.
Q20 What are CSS custom properties and how do they differ from preprocessor variables?
They are variables that exist at run time, inherit through the cascade, and can be changed from JavaScript.
A preprocessor variable is substituted at build time and then gone. A custom property can be redefined on any element or inside a media query, which is what makes theming a four-line change.
What it is really testing. Whether you know they exist at run time. That is what separates them from a preprocessor and makes theming possible.
Q21 How would you implement a dark theme?
Define colours as custom properties, then redefine them under a media query and a data attribute.
prefers-color-scheme follows the operating system; a data attribute on the root lets the user override it. Every rule using var() updates with no second stylesheet.
What it is really testing. Whether you handle both the system preference and an explicit user choice.
Q22 What is the difference between transition and animation?
A transition interpolates between two states triggered by a change; an animation runs keyframes independently.
Use a transition for hover and state changes, an animation for anything that loops, runs on load, or has more than two steps.
What it is really testing. Whether you pick based on what triggers the change rather than on complexity.
Q23 Which properties are cheap to animate?
transform and opacity, because they are handled at the composite stage and can skip layout and paint.
Animating width, height, top or margin forces layout on every frame, which drops frames on a long list. Moving with translate instead of left is the same visual result at a fraction of the cost.
What it is really testing. Whether you know the render stages. This is the difference between an animation that is smooth and one that stutters.
Q24 What is prefers-reduced-motion for?
Respecting a system setting for users who get motion sickness from animation.
A short media query that reduces durations to near zero covers the whole site. It is three lines and it matters to real people.
What it is really testing. Whether you know the operating system already carries this preference.
Q25 What is a pseudo-class versus a pseudo-element?
A pseudo-class selects an element in a state; a pseudo-element selects a part of one that is not in the DOM.
hover and nth-child are pseudo-classes; ::before and ::first-line are pseudo-elements. The double colon marks the difference, though single colons still work for legacy reasons.
What it is really testing. Whether you know pseudo-elements are not in the DOM, which is why JavaScript cannot select them.
Q26 What does the :has() selector let you do?
Style a parent based on its descendants - the 'parent selector' that CSS lacked for years.
A card that has an image can be styled differently from one that does not, with no class juggling in JavaScript. It also works for sibling conditions, which removes a lot of scripting.
What it is really testing. Whether you keep up. This closed a gap that shaped CSS architecture for a decade.
Q27 What is the difference between display: none and visibility: hidden?
display: none removes the element from layout and the accessibility tree; visibility: hidden keeps its space and hides it.
There is a third case - visually hidden but still announced - used for skip links and screen-reader labels. Using display: none for those hides them from the users who needed them.
What it is really testing. Whether you know about the visually-hidden third case, which is where accessibility actually lives.
Q28 What does overflow: hidden do beyond clipping?
It creates a new block formatting context, which stops margin collapse and contains floats.
That side effect is why it was used as a clearfix for years. It also breaks position: sticky on descendants, which catches people.
What it is really testing. Whether you know its side effects. It is used far more often for them than for clipping.
Q29 How do media queries work and where should breakpoints go?
They apply rules conditionally based on viewport characteristics - and breakpoints belong where the content breaks.
Choosing breakpoints by device width ages badly. Resizing the browser until the layout looks wrong gives a breakpoint that is about your content rather than somebody's phone.
What it is really testing. Whether you choose breakpoints from content rather than from a device list.
Q30 What is mobile-first CSS?
Writing base styles for small screens and adding complexity with min-width queries.
It tends to produce simpler CSS, because enhancing upward adds rules while the reverse means overriding them. It also matches how the content is usually prioritised.
What it is really testing. Whether you can say why it produces simpler CSS rather than just naming the approach.
Q31 What is a container query and why does it matter?
It applies styles based on the size of a container rather than the viewport.
A card in a sidebar and the same card in a wide column can now style themselves, which media queries never allowed. It is the first real answer to component-level responsiveness.
What it is really testing. Whether you know component-level responsiveness was impossible before this.
Q32 What is the difference between a CSS reset and normalise?
A reset removes browser defaults; normalise makes them consistent while keeping sensible ones.
Resets mean restyling everything including headings and lists. Most modern stylesheets use a small custom set - border-box, margin zero, a line-height - rather than either extreme.
What it is really testing. Whether you have an opinion about which, and why most projects now use neither in full.
Q33 How does specificity interact with CSS layers?
Layers create explicit precedence bands, so a rule in a later layer beats an earlier one regardless of specificity.
@layer is what lets you load a framework into a low-priority layer and override it with a simple selector, instead of escalating specificity to win.
What it is really testing. Whether you know layers beat specificity entirely. It changes how third-party CSS is handled.
Q34 What is the stacking order without z-index?
Positioned elements paint above non-positioned ones, and later elements above earlier ones in document order.
Floats, inline content and backgrounds each have a place in that order. Knowing it explains why an element overlaps another without any z-index involved.
What it is really testing. Whether you know painting has an order even without z-index.
Q35 What causes layout shift and how do you prevent it?
Content loading without reserved space - images, fonts, ads injected after render.
Setting width and height on images lets the browser reserve the box before download. aspect-ratio does the same for responsive images, and font-display controls the swap.
What it is really testing. Whether you know how to reserve space before an asset loads. This is a measured ranking factor.
Q36 What is the difference between min-width and max-width in a media query?
min-width applies from that width upward, max-width from that width downward.
Mixing them in one stylesheet produces overlapping ranges that are hard to reason about. Picking one direction - usually min-width - keeps the cascade predictable.
What it is really testing. Whether you avoid mixing directions. Overlapping ranges are a common source of confusing bugs.
Q37 How do you debug a layout you do not understand?
Inspect the element, read computed styles, and turn on the layout overlay for flex or grid.
The computed panel shows which rule won and which were struck through, which answers the specificity question in seconds. The box model diagram answers 'my padding is not working'.
What it is really testing. Whether you have a method. Naming the tool you would open beats guessing at a property.
Q38 What does contain or content-visibility do?
They tell the browser that a subtree's layout or paint cannot affect the rest, so it can skip work.
content-visibility: auto can substantially cut initial render time on very long pages by not laying out offscreen sections. It needs contain-intrinsic-size to avoid scrollbar jumping.
What it is really testing. Whether you know about rendering performance beyond animation.
Q39 What is the difference between a class selector and a utility class approach?
Semantic classes name the component; utility classes name the style and are composed in the markup.
Utilities trade markup verbosity for a stylesheet that stops growing and has no specificity conflicts. The right choice depends on team size and how much the design is reused.
What it is really testing. Whether you can argue both sides. A candidate who dismisses one approach outright has usually used only the other.
Q40 What is the single most useful habit for maintainable CSS?
Keeping specificity low and flat, so later rules can override earlier ones without escalation.
A stylesheet of single-class selectors is one anybody can modify. One full of nested descendant selectors and ids is one where every change needs another !important.
What it is really testing. Whether you understand that overridability is the property that matters in a stylesheet others will edit.