Getting Down with ...

by ...

Lesson n:

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:

IDs Win image

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.

Ownership browser default reader's style sheet author's sytle sheet
Specification Method external internal inline
Selector Specificity contextual selector depth class id


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

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

External < Class < Id < Inline < !important