How CSS thinks
The ideas underneath everything else: how a rule is built, how to choose elements precisely, how conflicts are settled, and how colours and sizes are written.
About 6 hours of study
Learning objectives
- Write valid rules and find mistakes in them
- Select exactly the right elements
- Explain why a rule wins or loses
Lessons
- 1
What CSS is and how it reaches a page
How CSS separates a page's look from its content, how a rule is built, the three places styles can live, and why browsers skip what they cannot read.
- 2
Selectors: choosing what to style
Select elements by type, class, id, attribute and position in the page, and combine selectors precisely without writing fragile ones.
- 3
The cascade, specificity and inheritance
Why one CSS rule beats another, how specificity is counted, what inherits from parents, and how to resolve conflicts without reaching for !important.
- 4
Colours, units and values
Write colours in several formats, choose between px, em, rem, percentages and viewport units, and compute sizes with calc.
Module practice
- Your first two rulesEasy
- Move inline styles into a stylesheetMedium
- Repair a broken stylesheetHard
- Classes and groupsEasy
- Style by relationshipMedium
- Style a form and links by attributeHard
- Predict and fix the winnerEasy
- Win without !importantMedium
- Let inheritance do the workHard
- One colour, three waysEasy
- A scale that follows the readerMedium
- Fill the space with calcHard