CSS decides how a page looks
CSS (Cascading Style Sheets) is the language that says how the elements of a web page look: their colours, sizes and spacing. When two rules give different values to one element, the browser has to choose, and it follows fixed steps called the cascade.
In this lesson you will learn those steps, so that you can predict which rule wins instead of guessing.
By the end of this lesson
Note
I can predict which CSS rule wins.
Key words
| Word | What it means | Example |
|---|---|---|
| Selector | the part of a rule that says which elements it is for | p.note |
| Declaration | one setting, a property and a value | color: red |
| Specificity | how exactly a selector points at an element | |
| Cascade | the steps the browser uses to pick one rule | |
| Inheritance | a child element taking a value from its parent |
The cells students fill in are left blank in this preview.
A rule is a selector and declarations
A CSS rule has a selector and a block of declarations in curly braces. The selector says which elements the rule is for. Each declaration is a property, a colon, a value and a semicolon.
There are three common selectors. A tag selector such as p matches every paragraph. A class selector such as .note matches elements with class="note". An id selector such as #intro matches the one element with that id.
Try it: style the notice
<h2>Library notices</h2>
<p>Books are due on Friday.</p>
<p class="note">The cafe is closed on Monday.</p>
<p id="intro">Welcome to the library.</p>The more exact selector wins
Two rules can reach one element and disagree. The browser first compares how exact each selector is. This is its specificity.
Count three things in the selector, in this order: ids, then classes, then tag names. Compare the counts from the left. The first count that differs decides. If every count is the same, the rule written later wins.
Worked example: counting specificity
| Selector | Ids | Classes | Tags | Beats |
|---|---|---|---|---|
| p | 0 | 0 | 1 | nothing here |
| .note | 0 | 1 | 0 | p |
| p.note | 0 | 1 | 1 | .note and p |
| ul li a | 0 | 0 | 3 | p, but not .note |
| #intro | 1 | 0 | 0 | every row above |
The cells students fill in are left blank in this preview.
Read the rules of the lab page
docker exec jupyter python3 steps/css.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The lab page has rules that compete
The script lists the lab page's rules and ends with a total of 17 rules and 39 declarations. Two of its lines are 4 declarations in body and 3 declarations in body.dark.
A page with the class dark on its body matches both. The selector body.dark has one tag and one class, so it is more exact than body, and its colours win. That is how a dark theme works.
A common mistake
Warning
Many people think the rule written last always wins. It does not. Order only decides when two selectors are equally specific. A short rule with an id selector beats a later rule with a class selector.
Some values pass down to children
Some properties are inherited. If you set them on a parent, every child gets them unless a rule says otherwise. Text properties such as color and font-family are inherited.
Box properties such as margin, padding and border are not. This is why one color rule on body can colour a whole page, while a border must be set on each box.
Try it: colour passes down, borders do not
<div class="card">
<h2>Study room</h2>
<p>Book a seat for two hours.</p>
</div>