CSS Interview Questions and Answers

What a CSS round actually looks like

For React-heavy candidates this is the round that goes worst, because it is the one they did not revise. It is usually short - ten to fifteen minutes inside a larger frontend interview, and it is almost never about obscure properties. The interviewer describes a layout and asks how you would build it, then asks why something in their existing code is not behaving, and both questions are really about whether you can reason about the cascade and the box model rather than trying declarations until one works.

That means the highest-return preparation is not learning more properties. It is being able to explain, out loud and without hedging, what creates a containing block, what creates a stacking context, and what makes a layout adapt without a breakpoint. Those three ideas cover most of what gets asked and almost all of what gets debugged.

What is the box model, and why border-box?

Every element is a box of content, wrapped in padding, then a border, then margin. Under the default `content-box`, the `width` you set applies to the content only, so padding and border are added on top and the element ends up wider than the number you wrote. `border-box` makes width include padding and border, which is what almost everyone means when they set a width.

The detail worth adding is that margin is never included in either mode, it is space around the box, not part of it, which is why a full-width element with a margin still overflows its container. That is the actual cause of most "why is there a horizontal scrollbar" bugs, and connecting the two shows the model is something you use rather than recite.

How does specificity and the cascade work?

When two rules set the same property, the browser resolves it in order: origin and importance first, then specificity, then source order. Specificity is a three-part score, ids, then classes and attributes and pseudo-classes, then elements and pseudo-elements, compared left to right, with the first differing column deciding. It is not a single number, which is why a hundred classes never beat one id.

Two modern additions are worth naming because they show you have kept up. `:where()` always scores zero, which makes it the correct way to write library or reset styles that consumers can override with a single class. And cascade layers - `@layer reset, base, components`, let you decide precedence by layer order rather than by selector weight, which is the structural fix for the problem `!important` papers over.

What do the position values do?

`static` is the default and ignores offsets. `relative` shifts the element visually while it keeps its space in the flow, and, more importantly, makes it a positioning context for its descendants. `absolute` removes the element from the flow and positions it against the nearest positioned ancestor. `fixed` positions against the viewport. `sticky` behaves as relative until a scroll threshold, then as fixed within its parent.

The last case is genuinely useful to know and almost never covered: a `transform` on an ancestor turns that ancestor into the containing block for `fixed` descendants, so a modal inside an animated wrapper stops covering the screen. It is the same underlying rule as the z-index problem below, which makes them a good pair to answer together.

Why doesn't z-index work?

Because `z-index` only orders siblings within the same stacking context. If an ancestor creates its own context, everything inside it is painted as a single unit at that ancestor's level, so a child with `z-index: 9999` cannot escape a parent whose context sits below the header. Raising the number does nothing, which is why this bug is so frustrating to debug by trial and error.

The answer that scores names the cause and the fix in the right order. The cause is an ancestor creating a context, usually an `opacity`, a `transform` or a `filter` added for an animation. The fix is to render the modal in a portal so it is not inside that ancestor at all, which is exactly why every React UI library portals its overlays to the body. Escalating z-index values is the anti-pattern being tested for.

How do you centre an element?

Both axes, one line: `display: grid; place-items: center`. Interviewers ask this to check for hesitation more than knowledge, so answer instantly and then offer the alternatives. The old absolute-positioning trick is still worth knowing because you will meet it in legacy code.

The reason `translate(-50%, -50%)` works is worth a sentence, because it is the one part of that snippet people cannot explain: percentage values in `transform` resolve against the element's own size, whereas percentages in `top` and `left` resolve against the containing block. That is what makes the trick size-agnostic.

What is margin collapsing?

Adjacent vertical margins in normal flow combine into one margin equal to the larger of them, rather than adding up. It applies between siblings, between a parent and its first or last child, and on an empty element's own top and bottom margins. Horizontal margins never collapse, and neither do margins inside flex or grid containers.

The strongest close here is to say you rarely deal with margin collapsing any more because you space children with `gap` in a flex or grid container. That removes the collapsing entirely, removes the `:last-child { margin-bottom: 0 }` rule everyone used to write, and is what a modern codebase looks like, which is a better answer than knowing three ways to suppress it.

How do you build a responsive layout without media queries?

By letting the layout respond to the space it is given rather than to the viewport size. `clamp()` handles fluid type and spacing between a floor and a ceiling. `minmax()` with `auto-fit` builds a grid that reflows on its own. Container queries let a component respond to its own width, which is what you actually want for a card that appears in both a sidebar and a main column.

The `auto-fit` and `minmax` grid is the single best answer to "make this responsive" in an interview, because it produces every breakpoint at once from one declaration. And the reason container queries matter is worth stating: a component's correct layout depends on the space it has, not on the size of the window, so a viewport media query is the wrong signal for anything reusable.

What are CSS custom properties good for?

Custom properties are not just variables, they cascade and inherit, they are live at runtime, and JavaScript can read and write them. That combination is what makes them the mechanism behind theming: define the tokens on `:root`, override them under a selector or a media query, and every rule that references them updates without touching any other CSS.

Which modern CSS is worth mentioning?

Naming two or three features that shipped recently is a cheap way to show you still read about CSS rather than reusing what you learnt four years ago. `:has()` is the one to lead with, it is the long-requested parent selector, and it lets you style a container based on what it contains, which previously required JavaScript. `aspect-ratio` replaces the padding-top percentage hack for keeping media in proportion. `inset` is shorthand for top, right, bottom and left in one declaration.

Beyond those, subgrid lets a nested grid align to its parent's tracks, which finally solves the problem of making card headers line up across a row when the text lengths differ. Logical properties such as `margin-inline` and `padding-block` adapt automatically to writing direction, which matters for any product shipping in more than one script. And `@layer` gives the cascade explicit ordering, which is the structural answer to specificity conflicts rather than the `!important` one. Mention what you have actually used and say so honestly, an interviewer will follow up, and a feature you have only read about is easy to spot.

What loses marks in a CSS round

CSS answers fail in predictable ways, and none of them are about not knowing enough properties.

• →Raising a z-index instead of asking what created the stacking context.
• →Reaching for !important, then having no explanation beyond "it was being overridden".
• →Not knowing that position: absolute needs a positioned ancestor to anchor to.
• →Hesitating on how to centre a div, it reads as inexperience, fairly or not.
• →Answering every responsive question with a list of pixel breakpoints.
• →Picking Flexbox or Grid by habit rather than by whether the layout is one or two dimensional.
• →Not recognising margin collapsing when shown a gap that is smaller than the sum of two margins.