123 CSS interview questions with answers (2026)

All CSS interview questions

What does 'cascade' mean in CSS?

What is inheritance in CSS?

How do px, em, rem, %, vw, and vh differ?

When should you use !important? Why should you avoid it?

What is the :has() selector?

How do combinator selectors (>, +, ~, space) differ?

How do :is(), :where(), and :not() differ?

What does the box model consist of?

What is the difference between box-sizing: content-box and border-box?

What is margin collapsing?

What values does the position property accept?

How does position: sticky work?

How does z-index work?

What is a stacking context?

What is Flexbox? When should you use it?

How do justify-content and align-items differ?

What are flex-grow, flex-shrink, and flex-basis?

How does flex-wrap work?

What is the gap property in Flexbox?

How do you center an element both horizontally and vertically using Flexbox?

What is CSS Grid? How does it differ from Flexbox?

What is the fr unit?

How do grid-template-columns and grid-template-rows work?

How do auto-fit and auto-fill differ?

What is the minmax() function used for?

What are grid template areas?

What is subgrid?

How does grid placement (grid-column, grid-row) work?

What is responsive design?

What is the mobile-first approach?

How are media queries used?

What is the clamp() function used for?

What are container queries?

How do responsive images (srcset, sizes) work?

How do @keyframes work?

What is the will-change property used for?

Why do transform/opacity animations run smoother than top/left?

What are reflow and repaint?

What are CSS logical properties?

What is CSS scroll-snap?

What are new color spaces in CSS (oklch, lab)?

How does native CSS Nesting work?

What are @layer (Cascade Layers)?

What is BEM (Block Element Modifier)?

What is utility-first CSS (Tailwind)?

What are CSS Modules?

What is CSS-in-JS? What are its pros and cons?

What is critical CSS?

What values does font-display accept?

What is layout thrashing? How do you avoid it?

What is the backdrop-filter property used for?

What are scroll-driven animations?

What is CSS Anchor Positioning?

What is the @property rule used for?

What is the CSS View Transitions API?

What is the Popover API and its related CSS?

Why should you use CSS Grid for page layouts instead of float/position?

How do you implement text truncation with ellipsis?

What are variable fonts?

When should you use the prefers-reduced-motion media query?

What is the prefers-color-scheme media query?

How are the picture element and source used?

What is the formula for fluid typography?

What are design tokens?

What is content-visibility: auto?

How does box-shadow differ from filter: drop-shadow()?

Should breakpoints be set by device or by content?

What are composite layers in the browser?

How do CSS math functions (calc, min, max, clamp) differ?

How do :focus-visible and :focus differ?

What is the color-mix() function used for?

Why is oklch better than hsl for design systems?

How do you optimize Cumulative Layout Shift (CLS)?

When should you use CSS-in-JS vs CSS Modules vs Tailwind?

What are dark mode implementation best practices?

What is the touch-action property used for?

Container queries vs media queries — when should you use each?

How do you optimize Largest Contentful Paint (LCP) with CSS?

How do you reduce CSS bundle size?

Flexbox vs Grid. When should you use each and why?

What is BFC (Block Formatting Context)? How do you trigger one?

What is margin collapsing in CSS? Why doesn't margin: 20px + margin: 30px equal 50px?

What are CSS Grid template areas? How do you make a responsive dashboard layout without changing the HTML?

What is a stacking context in CSS? Why does z-index sometimes not work?

Web accessibility (a11y): what are the roles of semantic HTML and ARIA?

What are CSS custom properties (variables)? How do they differ from Sass variables?

What is the difference between a pseudo-class and a pseudo-element?

How do CSS `transition` and `animation` differ? When do you use each?

What is a stacking context? Why can an element with a high `z-index` still be covered?

How do a CSS reset and normalize differ?

How do `border` and `outline` differ in CSS?

What does `flex: 1` expand to? How is it different from `flex: auto`?

For a toolbar (logo left, menu centre, button right) and a product card grid, which do you pick — Flexbox or Grid? Why?

How do `align-items` and `align-content` differ? Why does setting `align-content` sometimes do nothing?

Why prefer `gap` over `margin-right` plus a `:last-child { margin-right: 0 }` reset for spacing items?

A flex item holding long text (or `overflow: hidden`) refuses to shrink and overflows the container. Why, and how do you fix it?

With `repeat(auto-fit, minmax(240px, 1fr))`, a single remaining card stretches across the whole row. Why? What changes with `auto-fill`?

A grid column sized `1fr` overflows horizontally when it holds long content (a table, an unbreakable URL). How do you fix it?

How do you build a dashboard layout (header / sidebar / main / footer) and reorder it on mobile using `grid-template-areas`?

You set `position: sticky; top: 0` but the element does not stick. What do you check?

A child has `margin-top: 40px` but the whole parent block moves down instead of the child moving inside it. Why, and how do you stop it?

How is `aspect-ratio` used, and what does it improve over the percentage padding-top trick?

A dropdown with `z-index: 9999` is still covered by another element. Explain why and how to fix it.

How do `height: 100%`, `100vh`, and `100dvh` differ? Why does `100vh` misbehave on mobile?

In a flex column (header + content + footer), the content pane has `overflow-y: auto` but never scrolls — the whole page grows instead. How do you fix it?

When do you reach for a container query instead of a media query? What setup does it need and what are the pitfalls?

The page jumps around as images and fonts finish loading. What causes this and how do you reduce CLS?

A rule written later in the file still loses to an earlier one. How do you explain CSS's winner-takes-all order?

A UI library's styles override yours and a teammate just adds `!important`. Why is that a bad sign, and how do you handle it properly?

You want to use a new CSS property but still support older browsers. How do you write `@supports`, and what should you watch out for?

A CSS variable declared inside one component is unusable in another. Why? And when does the `var(--x, fallback)` fallback kick in?

How do you build dark mode with CSS variables so it follows the system setting, allows a manual override, and does not flash the wrong theme on load?

`:is()` and `:where()` look identical — what actually differs? When must you choose `:where()`?

What problems does `:has()` solve that previously required JavaScript? Give practical examples.

The product will support Arabic (RTL). How do logical properties help, and how do you migrate existing CSS?

The team is debating BEM versus utility-first (Tailwind). How do you frame the trade-offs?

Using `clamp()` for responsive font sizes instead of a stack of media queries — what is the formula and what is the accessibility pitfall?

A slide-out menu janks on low-end devices. Which properties do you animate, and why is `transform` smoother than `left`/`width`?

A large project has reset, vendor, component and utility styles overriding each other unpredictably. How does `@layer` help, and what are its traps?

For a new React app, how do you choose between CSS Modules, CSS-in-JS and Tailwind?

Someone adds `will-change: transform` to every animated element "to make it smoother". What harm does that do?

A long list page (a few thousand cards) renders slowly even with server-side pagination. How do `content-visibility` and `contain` help?

The project's CSS keeps growing and nobody dares delete anything for fear of breaking the UI. What strategy do you propose?

All CSS interview questions

What does 'cascade' mean in CSS?
What is inheritance in CSS?
How do px, em, rem, %, vw, and vh differ?
When should you use !important? Why should you avoid it?
What is the :has() selector?
How do combinator selectors (>, +, ~, space) differ?
How do :is(), :where(), and :not() differ?
What does the box model consist of?
What is the difference between box-sizing: content-box and border-box?
What is margin collapsing?
What values does the position property accept?
How does position: sticky work?
How does z-index work?
What is a stacking context?
What is Flexbox? When should you use it?
How do justify-content and align-items differ?
What are flex-grow, flex-shrink, and flex-basis?
How does flex-wrap work?
What is the gap property in Flexbox?
How do you center an element both horizontally and vertically using Flexbox?
What is CSS Grid? How does it differ from Flexbox?
What is the fr unit?
How do grid-template-columns and grid-template-rows work?
How do auto-fit and auto-fill differ?
What is the minmax() function used for?
What are grid template areas?
What is subgrid?
How does grid placement (grid-column, grid-row) work?
What is responsive design?
What is the mobile-first approach?
How are media queries used?
What is the clamp() function used for?
What are container queries?
How do responsive images (srcset, sizes) work?
How do @keyframes work?
What is the will-change property used for?
Why do transform/opacity animations run smoother than top/left?
What are reflow and repaint?
What are CSS logical properties?
What is CSS scroll-snap?
What are new color spaces in CSS (oklch, lab)?
How does native CSS Nesting work?
What are @layer (Cascade Layers)?
What is BEM (Block Element Modifier)?
What is utility-first CSS (Tailwind)?
What are CSS Modules?
What is CSS-in-JS? What are its pros and cons?
What is critical CSS?
What values does font-display accept?
What is layout thrashing? How do you avoid it?
What is the backdrop-filter property used for?
What are scroll-driven animations?
What is CSS Anchor Positioning?
What is the @property rule used for?
What is the CSS View Transitions API?
What is the Popover API and its related CSS?
Why should you use CSS Grid for page layouts instead of float/position?
How do you implement text truncation with ellipsis?
What are variable fonts?
When should you use the prefers-reduced-motion media query?
What is the prefers-color-scheme media query?
How are the picture element and source used?
What is the formula for fluid typography?
What are design tokens?
What is content-visibility: auto?
How does box-shadow differ from filter: drop-shadow()?
Should breakpoints be set by device or by content?
What are composite layers in the browser?
How do CSS math functions (calc, min, max, clamp) differ?
How do :focus-visible and :focus differ?
What is the color-mix() function used for?
Why is oklch better than hsl for design systems?
How do you optimize Cumulative Layout Shift (CLS)?
When should you use CSS-in-JS vs CSS Modules vs Tailwind?
What are dark mode implementation best practices?
What is the touch-action property used for?
Container queries vs media queries — when should you use each?
How do you optimize Largest Contentful Paint (LCP) with CSS?
How do you reduce CSS bundle size?
Flexbox vs Grid. When should you use each and why?
What is BFC (Block Formatting Context)? How do you trigger one?
What is margin collapsing in CSS? Why doesn't margin: 20px + margin: 30px equal 50px?
What are CSS Grid template areas? How do you make a responsive dashboard layout without changing the HTML?
What is a stacking context in CSS? Why does z-index sometimes not work?
Web accessibility (a11y): what are the roles of semantic HTML and ARIA?
What are CSS custom properties (variables)? How do they differ from Sass variables?
What is the difference between a pseudo-class and a pseudo-element?
How do CSS `transition` and `animation` differ? When do you use each?
What is a stacking context? Why can an element with a high `z-index` still be covered?
How do a CSS reset and normalize differ?
How do `border` and `outline` differ in CSS?
What does `flex: 1` expand to? How is it different from `flex: auto`?
For a toolbar (logo left, menu centre, button right) and a product card grid, which do you pick — Flexbox or Grid? Why?
How do `align-items` and `align-content` differ? Why does setting `align-content` sometimes do nothing?
Why prefer `gap` over `margin-right` plus a `:last-child { margin-right: 0 }` reset for spacing items?
A flex item holding long text (or `overflow: hidden`) refuses to shrink and overflows the container. Why, and how do you fix it?
With `repeat(auto-fit, minmax(240px, 1fr))`, a single remaining card stretches across the whole row. Why? What changes with `auto-fill`?
A grid column sized `1fr` overflows horizontally when it holds long content (a table, an unbreakable URL). How do you fix it?
How do you build a dashboard layout (header / sidebar / main / footer) and reorder it on mobile using `grid-template-areas`?
You set `position: sticky; top: 0` but the element does not stick. What do you check?
A child has `margin-top: 40px` but the whole parent block moves down instead of the child moving inside it. Why, and how do you stop it?
How is `aspect-ratio` used, and what does it improve over the percentage padding-top trick?
A dropdown with `z-index: 9999` is still covered by another element. Explain why and how to fix it.
How do `height: 100%`, `100vh`, and `100dvh` differ? Why does `100vh` misbehave on mobile?
In a flex column (header + content + footer), the content pane has `overflow-y: auto` but never scrolls — the whole page grows instead. How do you fix it?
When do you reach for a container query instead of a media query? What setup does it need and what are the pitfalls?
The page jumps around as images and fonts finish loading. What causes this and how do you reduce CLS?
A rule written later in the file still loses to an earlier one. How do you explain CSS's winner-takes-all order?
A UI library's styles override yours and a teammate just adds `!important`. Why is that a bad sign, and how do you handle it properly?
You want to use a new CSS property but still support older browsers. How do you write `@supports`, and what should you watch out for?
A CSS variable declared inside one component is unusable in another. Why? And when does the `var(--x, fallback)` fallback kick in?
How do you build dark mode with CSS variables so it follows the system setting, allows a manual override, and does not flash the wrong theme on load?
`:is()` and `:where()` look identical — what actually differs? When must you choose `:where()`?
What problems does `:has()` solve that previously required JavaScript? Give practical examples.
The product will support Arabic (RTL). How do logical properties help, and how do you migrate existing CSS?
The team is debating BEM versus utility-first (Tailwind). How do you frame the trade-offs?
Using `clamp()` for responsive font sizes instead of a stack of media queries — what is the formula and what is the accessibility pitfall?
A slide-out menu janks on low-end devices. Which properties do you animate, and why is `transform` smoother than `left`/`width`?
A large project has reset, vendor, component and utility styles overriding each other unpredictably. How does `@layer` help, and what are its traps?
For a new React app, how do you choose between CSS Modules, CSS-in-JS and Tailwind?
Someone adds `will-change: transform` to every animated element "to make it smoother". What harm does that do?
A long list page (a few thousand cards) renders slowly even with server-side pagination. How do `content-visibility` and `contain` help?
The project's CSS keeps growing and nobody dares delete anything for fear of breaking the UI. What strategy do you propose?