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.
Who it is for
Confident; wants the traps.
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
Containing Blocks
Find the box an element's offsets and percentages are measured against, and name what established it.
-
02
Stacking Contexts In Full
List what creates a stacking context and work out which of two boxes paints on top.
-
03
Block Formatting Contexts
Say what a block formatting context changes about floats, margins and overlap, and which declarations start one.
-
04
Margin Collapsing
Predict when two margins become one, including through a parent, and name the declaration that stops it.
-
05
Replaced Element Sizing
Explain how an image sizes itself from its intrinsic dimensions, attributes and CSS together.
-
06
Intrinsic & Extrinsic Sizing
Choose between a size the box is given and a size the box works out from its own content.
-
07
Cascade Layers
Predict which declaration wins once layers are in play, including when !important is involved.
-
08
Selector Functions & Specificity
Compute the specificity of :is, :where, :not and :has, and use them to hold it down.
-
09
Custom Properties & Invalid Values
Predict what a var() resolves to, when the fallback is used, and what happens when substitution fails.
-
10
Containment & Discrete Transitions
Say what each containment value promises the engine, and transition a property that has no in-between.
8 more topics, and all 90 questions
CSS Advanced 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
Containing Blocks
The button was fixed to the viewport, and now it scrolls away with the panel. Why?
<style>
.panel { transform: translateZ(0); }
.fab { position: fixed; bottom: 0; }
</style>
<div class="panel">
<button class="fab">Add</button>
</div>Show the answer
A Because a transform on an ancestor makes that ancestor the containing block for fixed descendants
The compositing explanation is the popular one and it is about painting, not layout - a layer promotion on its own never changes what a percentage or an offset is measured from. The containing block rule is the real one, and it is why will-change: transform on a wrapper can break a fixed header three components away. filter and contain do the same thing.
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 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.
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.
Start CSS Advanced
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