The C in CSS: How the Cascade Really Works

CSS is kind of weird when you think about it. It’s not exactly a programming language, but you still have to think in a pretty abstract way.

It looks super simple. You pick some elements using selectors, then just add a bunch of key/value pairs to style them, that’s basically how CSS syntax works, but once you start using it in a bigger project, it can turn into a total mess if you don’t know the most important thing about CSS: knowing when to do what.

How the Cascade Really Works

In this post I’ll go through some fundamentals like cascade, inheritance, box model and relative units which help you understand how styles actually get applied to elements, and how their sizes are figured out. Depending on how long this gets, I might break it into a few parts.

Cascade

We’ll start with a few core principles of CSS, stuff you might already be familiar with. But like someone smart once said, the basics matter. One of those is the cascade (Yup, that’s the “C” in CSS), and another is inheritance. Both are about making sure your styles land where you actually want them.

The cascade is how the browser decides which CSS rule to apply when there’s more than one competing option. For example, say you style a heading in three different ways:

• One rule says: make it red.