CSS interview questions: practice with real frontend questions
Reviewed by Mark Dickie · Last updated
CSS is the language that controls how HTML elements look and are positioned on a page — from colors and fonts to the box model, layout systems, and responsive behavior. For a frontend interview, you should be fluent in the cascade and specificity rules, understand how the box model works including margin collapsing, know the main layout systems (flexbox and grid) and when to use each, and be able to explain how the browser turns CSS rules into painted pixels. Interviewers also probe your grasp of positioning, stacking contexts, pseudo-elements, media queries, and performance considerations like reflow versus repaint.
What does a CSS interview typically test?
Most CSS interviews cluster around a handful of recurring themes. The table below maps the core areas to what an interviewer is checking for:
| Topic | What gets tested |
|---|---|
| Specificity & cascade | How selectors compete, !important, inline vs. class vs. ID |
| Box model | content-box vs. border-box, margin collapsing, padding |
| Flexbox | Main/cross axis, flex-grow/shrink/basis, alignment props |
| Grid | Track sizing, fr units, grid-template-areas, implicit tracks |
| Positioning | static, relative, absolute, fixed, sticky, containing block |
| Stacking context | z-index, what creates a stacking context, painting order |
| Responsive design | Media queries, container queries, clamp(), relative units |
| Transforms & animation | transform, transition, @keyframes, GPU-accelerated properties |
How should you prepare for CSS interview questions?
- Write layout code by hand — don't rely on autocomplete. Being able to build a centered card or a three-column grid from memory is table stakes.
- Study the CSS specification for specificity and the cascade. Know the four specificity categories (inline, ID, class/attribute/pseudo-class, type/pseudo-element) and how they combine.
- Practice debugging layout problems. Interviewers often show you broken CSS and ask you to find the issue — margin collapse, missing
displayvalue, a parent with no height containing floated children. - Learn what triggers reflow versus repaint. Moving an element with
transformis cheaper than animatingtop/leftbecausetransformskips layout. - Read up on newer features —
:has(), container queries,@layer, cascade layers, and thecolor-mix()function — since interviewers at forward-leaning companies ask about them.
The quiz below pulls from these areas so you can gauge where you stand before the real thing.
Key facts
- Tarmac has 95 CSS interview questions on this topic, 10 of them on this page, at difficulty 1–4 of 5.
- Tarmac last reviewed these CSS interview questions on 23 August 2026.
At a glance
| Questions | 10 shown · 95 in the bank |
|---|---|
| Difficulty | 1–4 of 5 |
| Formats | Flashcard, Fill in the blank, Code output, Multiple choice, Find the bug, Short answer, Ordering, Multiple answer, True / false |
What you'll review
- media queries
- selectors
- box model
- flexbox
- positioning
- css variables
- cascade specificity
- grid
Practice questions
CSS/responsive/media-queries
In a mobile-first stylesheet, does @media (min-width: 768px) { ... } apply on screens narrower or wider than 768px?#
Show answer
Wider (or equal). min-width is a floor: the rules apply when the viewport is at least 768px. Mobile-first stylesheets write the base styles for small screens, then layer on min-width queries to enhance progressively larger viewports.
min-width sets a minimum threshold, so the query matches viewports that are that wide or wider. This is the mobile-first pattern: small-screen styles are the default and min-width breakpoints add to them as the screen grows.
CSS/selectors-cascade/selectors
The child combinator div _____ p matches a <p> only when it is a direct child of a <div>, while the attribute selector a[_____] matches any anchor that has an href.#
Show answer
The child combinator div **>** p matches a <p> only when it is a direct child of a <div>, while the attribute selector a[**href**] matches any anchor that has an href.
> is the child combinator: div > p targets only <p> elements that are immediate children of a <div> (a plain space would match any descendant). a[href] is an attribute selector matching every <a> that has an href attribute, regardless of its value.
CSS/layout/box-model
Consider the following HTML element rendered in a browser. With box-sizing: border-box, what is the total rendered outer width of this element (from the outer edge of the left border to the outer edge of the right border)? Answer in pixels.#
<div style="width: 200px; padding: 20px; border: 5px solid black; box-sizing: border-box;"></div>Show answer
200px
When box-sizing is border-box, the declared width (200px) includes the content, padding, and border. So the total outer width is exactly 200px — the 20px padding and 5px border on each side are absorbed inside the 200px, leaving the content at 200 − 2×20 − 2×5 = 150px.
CSS/layout/flexbox
In a flex container with flex-direction: column, which property positions items along the main (vertical) axis?#
Options
Show answer
justify-content positions items along the main axis. With flex-direction: column the main axis runs vertically, so justify-content controls vertical placement while align-items handles the horizontal cross axis. This is the reverse of the default row direction, where the axes are swapped.
justify-content always aligns items along the main axis. With flex-direction: column the main axis is vertical, so it controls vertical placement; align-items then controls the horizontal (cross) axis. The axes swap compared to the default row.
CSS/layout/positioning
The .badge should sit in the top-right corner of .card, but it stays at the top-left and ignores the offsets. Which line has the bug?#
.card {
position: relative;
}
.badge {
position: static;
top: 8px;
right: 8px;
}Show answer
The bug is on line 5.
The top and right offsets only take effect on a positioned element. .badge is position: static (the initial value), so the offsets are ignored. It should be position: absolute so it anchors to the position: relative .card.
CSS/css-architecture/css-variables
What are CSS custom properties (variables), and how do they differ from a preprocessor variable like Sass's $color?#
Show answer
A custom property is a --name declaration read with var(--name). Unlike a Sass variable, which is resolved once at compile time and then disappears, a custom property is live in the browser: it inherits down the DOM, can be overridden per selector or scope, read and changed at runtime with JavaScript, and respond to media queries — so one value can cascade and update dynamically.
Custom properties (--name / var(--name)) are part of the cascade: they inherit, can be scoped to any selector, and are resolved live in the browser, so they can be changed at runtime via JavaScript or media queries. Sass variables are static — substituted at build time and gone from the output CSS.
CSS/selectors-cascade/cascade-specificity
Order these selectors from lowest to highest specificity (the last one wins a conflict).#
Put these in order
Show answer
From lowest to highest specificity:
*— the universal selector contributes nothing, (0,0,0)li— one type selector, (0,0,1).nav li— one class plus one type, (0,1,1)#main— one ID, (1,0,0)
Compared column by column as the (id, class, type) tuple, the ID wins because its first column outranks every class and type count.
Specificity is the tuple (id, class, type). * contributes nothing → (0,0,0); li is one type → (0,0,1); .nav li is one class plus one type → (0,1,1); #main is one id → (1,0,0). Compared column by column, that orders them lowest to highest, and the ID wins because its first column outranks the others.
CSS/layout/flexbox
What does the shorthand flex: 1 expand to?#
Options
Show answer
flex: 1 expands to flex-grow: 1; flex-shrink: 1; flex-basis: 0%. The 0% basis is the crucial detail: because items start from zero, growth distributes the entire container space and produces truly equal-width items regardless of content. This differs from flex: auto, which uses flex-basis: auto.
A single-number flex: 1 sets flex-grow: 1, flex-shrink: 1, and flex-basis: 0%. The 0% basis is the key difference from flex: auto (which uses flex-basis: auto): with a 0 basis, growth distributes the entire container space, giving truly equal-width items regardless of content.
CSS/layout/grid
Which declarations are valid ways to define a 3-column grid where columns share the available space?#
Options
Pick every one that applies.
Show answer
The two valid forms are grid-template-columns: repeat(3, 1fr) and grid-template-columns: 1fr 1fr 1fr — equivalent ways to create three equal flexible tracks that split the container. grid-columns: 3 is not a real property, and repeat(3, auto) makes three tracks sized to their content rather than sharing the free space equally, so it fails the requirement.
repeat(3, 1fr) and 1fr 1fr 1fr are equivalent — both create three equal flexible tracks that split the container. grid-columns: 3 is not a real property. repeat(3, auto) creates three tracks, but auto sizes each to its content rather than sharing the free space equally, so it does not satisfy the requirement.
CSS/selectors-cascade/cascade-specificity
A single ID selector (#nav) has higher specificity than a selector made of ten classes (.a.b.c.d.e.f.g.h.i.j).#
Options
Show answer
True. A single ID outweighs any number of classes because specificity compares the (id, class, type) columns left to right, and a higher column always wins regardless of the lower ones. One ID gives (1, 0, 0) while ten classes give (0, 10, 0) — the ID column is compared first, and class count never carries up into it.
Specificity compares the (id, class, type) columns left to right; a higher column always wins regardless of the lower ones. One ID gives (1, 0, 0) while ten classes give (0, 10, 0). Because the ID column is compared first and 1 > 0, the ID wins — the class count can never carry into the ID column.
Sources
The official documentation these questions are checked against:
Related interview questions
The other 85 questions
This page shows 10. A free account opens the rest and marks your answers, which a page of answers can't do. Miss one and it returns a few days later, then a week after that, until you stop missing it.
Free · the whole bank · 100 graded answers per 30 days · written feedback and job-ad quizzes on the paid plan