CS 100 (Learn) — CS 100 (Web) — Module 08

CSS :: Cascading Behaviour

Now that we understand CSS, we can learn why style sheets are called "cascading".

Consider the following style sheet with many different styles for tags, classes and IDs defined. We will only be using the color and font-size properties to illustrate some CSS cascading behaviour.

CSS
body   {color: black;}

p      {color: blue;}

strong {color: red;}

.fun   {color: green;}

.party {font-size: 150%;}

#loud  {color: fuchsia;}
 

We will look at a few examples that use the above style sheet.

HTML
This is text outside of a paragraph.

<p>This paragraph has some <em>emphasized text</em> and some <strong>strong text</strong>.
web browser

This is text outside of a paragraph

This has some emphasized text and some strong text.

 

Adding a style to the <body> tag is useful for specifying a style for the entire document.

The first sentence in our example has no additional tags, and so the text uses the style for the <body> tag, which is black text.

The second sentence is within a <p> (paragraph), and so it has two conflicting styles: the style from the <body> and the style from the <p>.

As we can see, because the <p> tag is more specific, it uses the style from the <p>.

The general rule for CSS is: When there are conflicting styles, choose the style from the most specific element.

There is emphasized text with <em>, but there is no specific style for that tag, and so it reverts to the next more general tag, which is the <p> tag.

The strong text with <strong> does have a specific style tag, and so once again the most specific style is chosen, and the style from <strong> is used.

This is an example of what is known as inheritance in CSS, which is part of cascading behaviour.

If an element does not have a specific style property, it inherits the property from its "parent". If the parent does not have the property, it inherits from its "grandparent", and so on.

In this example, the parent of the <em> tag is <p>, and the <body> tag is its grandparent.

HTML
<p>This is a 
<span class="party">
  span that has another 
  <span class="fun">
    inner span within
  </span>
  an outer span
</span>
within a paragraph.
web browser

This is a span that has another inner span within an outer span within a paragraph.

 

In this example, the text "inner span within" inherits style from both of the classes .party and .fun in addition to the tag <p>.

As we expect, the .fun class is the most specific, and so it uses the color style from that class, but because the .fun class does not specify the font-size, the font-size is inherited from the .party class.

For this final example, we will see what happens when there are combination of tags, classes and IDs:

HTML
<p><strong>this is strong</strong>

<p><strong class="fun">this is fun and strong</strong>

<p><strong class="fun" id="loud">this is fun and strong and loud</strong>

<p><strong class="fun" id="loud" style="color: gray;">this is fun and strong and loud and gray</strong>
web browser

this is strong

this is fun and strong

this is fun and strong and loud

this is fun and strong and loud and gray

 

The CSS standard specifies very specific rules to resolve conflicting styles.

  1. A style attribute has the highest precedence (or is the most specific).
  2. An #id is considered the next most specific
  3. A .class is the next most specific, and
  4. A <tag> is the least specific

On top of these cascading rules are the inheritance that we have already seen.

Final Thoughts

You are not expected to understand the CSS cascading rules.

An entire course could be taught on all of the complicated nuances of CSS.

There are many complicated examples that we have not even mentioned.

It is sufficient to know: