Cascade and inheritance
Learn how styles combine and how inheritance works.
Cascade: the later one wins
The cascade is the 'C' in CSS. When two blocks give the same property different values on the same element, the browser takes the one written later in the file.
For example, if you write p { color: gray; } and then p { color: navy; }, paragraphs end up navy. The second block overrides the first. That is why the order of blocks matters.
Specificity: the more pointed one wins
When two blocks clash on the same element, the browser computes specificity. A broad selector has low priority; a more pointed selector has high priority. A type selector (e.g. p) is low priority.
Class and id selectors (in the next group) carry higher priority. For now: when two equal-priority blocks clash, the cascade kicks in and the later one wins.
Inheritance: properties flow down
Inheritance is when some properties pass from a parent element to its children. If you set color: navy on the body block, paragraphs inside it also become navy, because color is inherited.
But not every property is inherited. Properties like border or margin are not inherited; they do not pass to children automatically. We will see which properties inherit in more detail later.
Exercise Write two p blocks; let the later color win
Write two separate p blocks. Give the first one color: gray and the second one color: navy. The second block must come after the first, so the cascade makes navy win.
Show example solution
/* add two p blocks */
p {
color: gray;
}
p {
color: navy;
}Test yourself
-
Which color wins between these two p blocks?
p { color: gray; } p { color: navy; }- gray, because it is a lighter color
- navy, because it is written later in the file
- The colors alternate in turn
- Both apply at the same time
Show answer
navy, because it is written later in the file — Correct. When two equal-priority blocks clash, the one written later in the file wins.
-
Make the second p block's color 'navy'
p { color: gray; } p { color: ____; }Show answer
p { color: gray; } p { color: navy; } -
Match each term to its meaning
- Cascade
- The later one wins
- Specificity
- A more pointed selector wins
- Inheritance
- Properties flow to children
- Type selector
- Low priority