[001.5] Inheritance and Cascading


We explore inheritance, and learn why that C in CSS stands for Cascade.

Subscribe now

Drip 001.5: Inheritance and Cascading

The coolest thing about CSS is the cascading. Internally, browsers calculate a matrix of scores based upon rule importance, rule specificity, and source order. This matrix is the Cascade in Cascading Style Sheets, and the rules with the highest score are applied to the element. This also means that it can be very difficult to troubleshoot competing rules, especially when using third party frameworks.

First off, elements inherit styles from their parents. That means if you have something like this:

<ul>
  <li>Lorem ipsum </li>
  <li>Dolor sit amet</li>
  <li>consectetur adipisicing</li>
  <li>
    <strong>incididunt ut labore<strong>
  </li>
</ul>
ul {
  color: orange;
}

The contents of strong tag will inherit the styles from the li tag, cascaded from the ul tag. We could, of course, override this if need to:

strong {
  color: blue;
}

In this case the strong tag has higher specificity than the li tag, so now the text is blue even though it inherited orange.

Summary

Being aware of inheritance and cascading is very important when you are coding in CSS. If you've written some rules and aren't seeing them applied, it's always worth taking a moment to check if there are other rules that are getting a higher specificity, or if there are inherited rules that are conflicting with your new code.

The major browsers give us some great tools to help with this, and you can open those by right clicking and selecting 'inspect element' to see what rules are being applied. We'll dive deeper into these tools soon. See you next time!

Published on 05.13.2016