CSS Interview Questions: Cascade, Box Model, Flexbox and Grid
Reviewed by Mark Dickie · Last updated
5 questions on this page you can answer and see marked on the spot. Go to the first one
CSS is the stylesheet language that sets colors, spacing and layout for HTML pages in the browser. Interviewers mostly probe how the cascade resolves conflicting rules, how the box model sizes elements, and when you would pick Flexbox or Grid. Expect to explain why a rule did not apply, because debugging questions reveal more than memorized property names.
Which CSS topics do interviewers test most?
| Topic | What you should be able to explain | Common mistake |
|---|---|---|
| Cascade and specificity | Why #nav a beats .menu a, and how @layer changes the order rules win | Assuming the last rule in the file always wins |
| Box model | How box-sizing: border-box changes the rendered width of a padded element | Adding padding to a fixed width and getting overflow |
| Flexbox | The split between justify-content on the main axis and align-items on the cross axis | Using flex: 1 when flex-basis was the value needed |
| Grid | How minmax() and auto-fit build tracks that respond to available space | Hard-coding pixel column widths that break on narrow screens |
| Custom properties | Inheritance of --accent from :root into components, and where var() resolves | Treating them as build-time preprocessor variables |
| Stacking | What creates a stacking context, and why z-index does nothing on a non-positioned element | Raising z-index without checking the parent's stacking context |
How should you prepare for a CSS interview?
- Center a card horizontally and vertically with Flexbox, then with Grid, and state what markup each needed.
- Build a three-column row that stacks into one column below 600px using
auto-fitandminmax(), with no media query. - Rank the specificity of five selectors by hand, then predict which background color renders before you check in DevTools.
- Fix a dropdown that appears behind a sticky header, and name the stacking context that causes it.
Key facts
- Tarmac has 108 CSS interview questions on this topic, 10 of them on this page, at difficulty 1–4 of 5.
- Tarmac tracked 815 job postings asking for CSS in October 2026.
- Roles asking for CSS advertise a median base salary of US$180,000, across 201 job postings as of October 2026.
- Tarmac last reviewed these CSS interview questions on 7 November 2026.
At a glance
| Questions | 10 shown · 108 in the bank |
|---|---|
| Difficulty | 1–4 of 5 |
| Formats | Multiple choice, Flashcard, Fill in the blank, Code output, Find the bug, Short answer, Ordering, Multiple answer, True / false |
What you'll review
- flexbox
- media queries
- selectors
- box model
- positioning
- css variables
- cascade specificity
- grid
Practice questions
Try one before you open the answer. Pick an option and press Check; it's marked on the spot.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Job market
See css salaries and hiring demand from live job postings.
The other 98 questions
This page shows 10 and marks what you pick. That's as far as a page can go. A free account opens the other 98 and keeps every answer. What you miss comes back until it's right: after a day, then at longer gaps.
Free · the whole bank · 100 answers per 30 days, each marked with written feedback