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

Next lesson: Summary - My first stylesheet

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies