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.
Who it is for
Knows the syntax, not yet the behaviour.
Start here. It assumes you can read the language and nothing else.
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.
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
Selectors & Matching
Read a selector and say exactly which elements it matches, and which it does not.
-
02
Specificity
Work out which of two competing rules wins, and stop reaching for !important to settle it.
-
03
The Cascade
Say which declaration wins when several apply, and why moving a rule sometimes changes nothing.
-
04
Inheritance
Say whether a property reaches the children on its own, and use inherit and initial deliberately.
-
05
The Box Model
Work out how wide an element really is, and why two margins do not add up.
-
06
Display & Visibility
Choose between display, visibility and opacity by what each one does to the box, not just to the pixels.
-
07
Units & Colour
Resolve em, rem and percentages against the right reference, and read a colour value in any notation.
-
08
Text & Fonts
Control how text is drawn without changing what the document says.
-
09
Position & Stacking
Place an element out of the normal flow on purpose, and say which box ends up on top.
-
10
Flexbox Basics
Lay a row out with flexbox and explain which element each flex property is actually talking to.
A question from this course
Selectors & Matching
What colour is the paragraph?
<style>
#note { color: red; }
</style>
<p class="note">Draft</p>Show the answer
B Black, because #note matches id="note" and no element here has that id
You may have read #note as "the thing called note" because the word matches. In fact # only ever matches the id attribute and . only ever matches class, so this rule matches nothing and the paragraph keeps the default black. The fix is one character: .note.
The rest of the track
CSS at every depth
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.
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 Essentials
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