The Cascade is Not Inheritance


On more than one occasion, I've heard people conflate the cascade feature of CSS with inheritance. While it's an understandable thing to mix up because they are, in fact, related, I think it's important to use the correct terms when talking about technology like this.


Inheritance is when a child element inherits styles from one of its parent elements. Some (not all) CSS properties will automatically apply as a default value for child elements. This allows you to set a font family and color at the top level of a page and have all elements within that page use the same styles. Very cool.

The Cascade

The Cascade is the set of rules that a browser uses to determine which particular styles should apply to a given element, when there are conflicting rules. This is, in my mind, the trickiest part of the CSS language and it trips people up all the time.

The algorithm specified in CSS takes the following into consideration when applying styles:

This quote from MDN's Introduction to CSS: Cascade and Inheritance sums it up pretty well:

If you didn't fully understand the cascade, specificity, and inheritance, then don't worry! This is definitely the most complicated thing we've covered so far in the course, and is something that even professional web developers sometimes find tricky.

Novantica game screenshot with protagonist on hoverboard

I'm currently working on Novantica, a sci-fi adventure game.

Wishlist on Steam