Introduction to Cascade Rules

CSS cascade rules are used to determine which style gets applied to an element that has more than one style.

<h1>What <span class="looser" id="winner">Color</span> Is This?</h1>

What happens if the following styles are applied to the above?

#winner {
    color: orange;
}
.looser {
    color: green;
}

You can see the answer in this image of the rendered styled HTML:

The reason is that ids have a higher presidence than classes do, so the id rule to color the span orange beats the class rule to color it green.

Exercise:

Download cascade_rules.html and cascade_rules.css. After doing, see what the page looks like.

• After viewing the page, add the following lines of code to the style section inside the head.

    h2 {
        color: #FF0;
    }
    p {
        color:#F0F;
    }
    

  Then view the page and note what changed.
• Now, add new class and id selectors directly beneath the previous style.

    #watermelon {
        color: #0FF;
    }
    .strawberry {
        color: #000;
    }
    

  After you have done that, change the h2 element with the following code

    <h2 class="strawberry">
    

  Now, reload the page and note what changed.
• Return to the html element and add the id selector next to the class selector

    <h2 class="strawberry" id="watermelon">
    

  Again, reload the page and note what changed. What caused this change and why did it change at all? If you aren't sure, don't worry, we'll get to it soon.
• Now try the following experiment with the p element. Add the following

    <p id="watermelon" style="color:#00ffbf;">
    

  Note the changes to the page and then add the following to watermelon so that it looks like this

    #watermelon {
        color: #0FF !important;
    }
    

  After reloading the page, see what happened.

The order of importance is as follows, from least to most important:

External < Class < Id < Inline < !important