CSS Interview Questions
Specificity arithmetic, the cascade in full, box-sizing, centring in every mechanism, and flexbox against grid. Ten topics built around the questions that get asked out loud and the "what colour is this, and why" that follows.
Who it is for
Preparing, and short of time.
For someone confident in the language who wants the traps, the edge cases and the interview questions.
You will get the most out of it if you have written CSS recently enough to read it without effort, and have been surprised by it at least once. If you are picking the language up for the first time, start with CSS Essentials and come back to this one.
It is also built for interview preparation: the questions are the ones that get asked because they separate people who have read the documentation from people who have hit the behaviour in production.
How long it takes
90 graded questions at roughly 45 seconds each is about 68 minutes of answering in total.
At the default five questions a day, and because the session mixes in your other courses, expect around 18 days — call it 3 weeks — to see everything once, plus a few weeks of thinning reviews after that before it is all mastered.
A question is mastered on the third correct answer, once the gap between reviews has grown past a week — so a course cannot be finished in a weekend however long you sit with it.
Question mix
- 60 multiple choice
- 10 concept cards
- 10 predict the output
- 10 put it in order
- 10 matching questions
Syllabus
What you will be asked about
-
01
Specificity Arithmetic
Count a selector's specificity and say which of two rules wins, including the modern pseudo-classes.
-
02
The Cascade In Full
Walk the cascade in order - origin, importance, layers, specificity, appearance - and predict the winner.
-
03
Box Model And box-sizing
Work out what a declared width includes, and where padding and margins actually land.
-
04
Centring, Every Mechanism
Pick the right centring mechanism for a given box, and say why the familiar one is failing.
-
05
Flexbox Versus Grid
Choose between flexbox and grid for a given layout, and read the flex shorthand correctly.
-
06
Position And Stacking
Find an element's containing block and say which declarations create a stacking context.
-
07
Responsive Strategies
Choose between media queries, container queries and intrinsic sizing, and justify the choice.
-
08
Inheritance And The Global Keywords
Say which properties inherit and what inherit, initial, unset and revert each do.
-
09
Pseudo-Classes And Pseudo-Elements
Tell a pseudo-class from a pseudo-element and predict what each one selects.
-
10
What Colour Is This, And Why
Resolve a colour through matching, the cascade, inheritance and shorthand side effects.
8 more topics, and all 90 questions
CSS Interview Questions is a Pro course. One subscription opens it and every other course in the catalogue, including the ones still being written.
A question from this course
Specificity Arithmetic
Which colour wins?
<style>
#save { color: red; }
.a.b.c.d.e.f.g.h.i.j.k { color: blue; }
</style>
<p id="save" class="a b c d e f g h i j k">Go</p>Show the answer
A Red: one id is `1,0,0` and beats any number of classes
The instinct that enough classes must eventually add up to an id is the single most common specificity error. The columns are compared left to right and never carry, so 0,11,1 loses to 1,0,0 on the first comparison - and adding a twelfth class changes nothing.
The rest of the track
CSS at every depth
CSS Essentials
Selectors, specificity and the cascade, then inheritance, the box model and the units everything else is built on. Ten topics where the rule you wrote is not the rule that won, and the reason is always one of the same few.
CSS Core
Grid and flexbox past the first example, custom properties, calc with relative units, and the parts of backgrounds, overflow and transitions that surprise people. Ten topics that assume you already know the cascade.
CSS Idioms & Pitfalls
The CSS written out of habit that is wrong or fragile. !important as a first resort, id selectors for styling, magic numbers instead of intrinsic sizing, z-index escalation, and shorthands that quietly reset the longhand you set above.
CSS Advanced
Containing blocks, stacking contexts, block formatting contexts and the genuinely surprising cases of margin collapsing. Then cascade layers, :is and :where, and what happens to a custom property that is invalid at computed-value time.
CSS Performance
What actually costs: which property changes trigger layout, which only paint, and which the compositor handles alone. Layout thrash, containment, critical CSS, font loading and the image sizing that causes layout shift.
Start CSS Interview Questions
in tomorrow’s session.
Enrol and this course joins your daily five, mixed in with everything else you are studying — 90 questions spread over about 18 days rather than dropped on you at once.
Browse the catalogue