Cascading Inheritance

Why are CSS styles called cascading? When multiple rules are written that conflict with each other, the last rule written will be implemented. In this way, styles cascade downward and the last rule written is applied.

Let’s look at an example. Let’s write two CSS rules in an internal stylesheet that directly contradict each other.

        p {color: red;}
        p {color: blue;}
<p>What color will the text of this paragraph be?</p>

The browser will cascade through the styles and apply the last style encountered, overruling all previous styles. As a result, the heading is blue.

.code_sample_p {color: red;}
.code_sample_p {color: blue;}

What color will the text of this paragraph be?

This same cascading effect comes into play when using external stylesheets. It’s common for multiple external stylsheets to be used. When this happens, the style sheets are loaded in the order they appear in the HTML document head element. Where conflicts between stylesheet rules occur, the CSS rules contained in each stylesheet will overrule those contained in previously loaded stylesheets. Take the following code for example:

<link rel="stylesheet" type="text/css" href="styles_1.css">
<link rel="stylesheet" type="text/css" href="styles_2.css">

The rules in styles_2.css will be applied if there are conflicts between the styles contained in these two stylesheets.

Inheritance of styles is another example of the cascading behavior of CSS styles.

When you define a style for a parent element the child elements receive the same styling. For example, if we apply color styling to an unordered list, the child list items will display the same styles.

        ul {color: red;}
        <li>Item 1</li>
        <li>Item 2</li>

Here’s how that code would render..code-sample-ul {color: red;}

  • Item 1
  • Item 2

Not every property passes from a parent to its child elements. Browsers deem certain properties as non-inherited properties. Margins are one example of a property that isn’t passed down from a parent to a child element.

Related Posts

Beginner’s Guide to Sass

Have you ever wondered what SASS stands for? Or perhaps you already know what it is but haven’t taken the time to study and use it. Whether…

Create a Consistent Cross-Browser Experience

Every browser interprets the HTML specification a little differently. As a result, when identical code is rendered in two different browsers, there are often minor differences in…

What Can CSS Do?

A better question might be: “What can’t CSS do?” CSS can be used to turn an HTML document into a professional, polished design. Here are a few…


The second rule that determines which rules are applied to each HTML element is the rule of specificity. CSS rules with more specific selectors will overrule CSS rules with less…

How CSS Works

When writing CSS, there are many times that rules are written that conflict with each other. For example, when styling headers, all of the following rules may…

Best Practices for Preparing Your Markup for Styling

Now that you know how classes, IDs, and element tags can be used as hooks for CSS rulesets, how can you best implement this knowledge to write…