Skip to content

Cascade

The main ideology of how CSS works is layed out in it's name: Cascade. Good way to figure this out is a waterfall example: You have elements and styles and everything cascades down.

On top of everything, you have your browser defaults. For example, your <h1> tags are large and all <p> elements start on new line. But then we can add another layer to our waterfall by overriding these default styles with our own CSS styles. Read more about CSS Cascade.

Example (Changing h1 tag to be smaller and later to not be bold):

CSS
h1 {
  font-size: 20px;
}

h1 {
  font-weight: normal;
}

Inheritance

Some of the CSS properties applied will get passed down to your children elements. For example font-weight and color CSS properties. Not all the properties get passed down, but once you start using CSS you will eventually figure out which gets passed down and which does not.

Main thing here is that for example we could make text color of our whole <body> element be green. Then we can individually change the text color for example for our footer element. Here we can again see that everything gets passed down from up to down.

Read more about inheritance.

Example (all text in page green, except text in footer section is yellow):

CSS
body {
  color: green;
}
body footer {
  color: orange;
}

Specifity

If there are two rules applied for a element, your browser needs to determine which one is more specific / important and applies that style. It is good to refer to your elements using something like this ranked scale so you can actually calculate the specifity of your selector:

  • Normal elements (type selectors) get 1 point (like <h1>)
  • Elements with class selector gets 10 more points (like <h1 class="heading">)
  • Elements with ID selector gets 100 more points (like <h1 id="front-heading">)
  • Inline styles gets 1000 more points.

If two elements share the same specifity ranking, the one that was written afterwards wins. Read more about CSS Specifity

!important

There is also one exception that can be used to make your rule be super specific: !important. You can write !important after your selector which will make it super important / specific. Think of this like adding 1000 points to the specifity. It is however also important (no pun intended) that you understand that you should be using the !important term only if you have to.

Read more about the !important rule.

Let's Watch a Video

CSS Cascade