What is "the cascade?" It's the way in which styles interact with one another, how they flow from one element to another in the tree-diagram browsers construct for themselves.

Inheritance is an aspect of properties: a property is either inherited, or it isn't. For example, the text-align property is inherited: if a paragraph is centered and contains a section of <strong> text, the <strong> text will (normally) be centered.

Properties that are not inherited are a bit trickier. They often appear to be "inherited" when they are simply shown by default. background-color is an example: when an element with no background color is placed inside another element that does have a background color, the color of the outer element will show through, even though it's not "inherited". It's just that the inner element has a background-color of transparent, the default.

Create a file styletest.htm and try this: create a paragraph with a yellow background. In it, put a <strong> element. What color is behind the <strong> element? Is it the same in all browsers? Can you find a good example of a non-inherited property that doesn't appear to be passed on to enclosed elements?
Save this test file so you can add to it in later "See for Yourself" sections...

All else being equal, the order in which two rules are defined, decides which of the rules applies to an element. The last rule wins!

Example:

h1 {color: red;} ... h1 {color: green;}

What color will <h1> text be?

Try this for yourself in your styletest.htm file.

Selectors are the normal HTML tags when they're used in stylesheets to set rules: tags like h1, p, li, or td.

td {text-align: right;} /* Specificity: 1 */

A single selector has a specificity of 1.

When selectors are grouped together without commas to indicate a rule that applies to one selector only when it's inside another, the specificities are added together. When selectors are separated by commas, each retains its own specificity of 1.

h2 em {color: purple;} /* Specificity: 2 for <em> inside <h2>*/
h2, em {color: purple;} /* Specificity: 1 each for <h2> and <em>*/

In the head area of your styletest.htm file, declare a style rule making h1 gray:
h1 {color: gray;}

In the body of the file, create an h1 elment of class hilite saying, "Hello, Specificity!"
<h1>Hello, Specificity!</h1>

Save your file and check to make sure "Hello, Specificity" is gray.

Classes are the specifiers we make up, identified with a dot, to create styles that can go with any HTML tags. Classes have a specificity of 10.

.hilite {background-color: yellow;} /* Specificity: 10 */

When classes are combined with selectors, their values are added together:

h2 .hilite {background-color: aqua;} /* Specificity: 11 */

Pseudo-classes work just like classes. These are the specifiers we use to control the appearance of links in each status:

a:link {color: blue; text-decoration: underline;} /* Specificity: 10 */

Test this in your test file:

1. Declare a style rule creating a class hilite with color purple
   .hilite {color: purple;}
2. Add the hilite class to your h1 in the test file:
   <h1 class="hilite">Hello, Specificity!</h1>

What color does the h1 come out? Which rule "wins"?

IDs are specifiers we make up with a hash-mark "#" and use to identify unique sections of a Web page. IDs have a specificity of 100.

#top-navigation {background-color: navy; color: white;} /* Specificity: 100 */

When combined with selectors, their values are added together:

#top-navigation h2 {background-color: blue; color: yellow;} /* Specificity: 101 */

---

1. Add the following rule at the beginning of your test file styles:
   #redzone {color: red;}
2. Add redzone as the id of your h1 in the test file:
   <h1 id="redzone" class="hilite">Hello, Specificity!</h1>

There are now three rules governing "Hello, Specificity!". The selector rule makes it gray, the ID makes it red, and the class makes it purple. Which one wins?

Save this test file so you can add to it later...

Inline styles are those which we put in the body of the HTML page. They have an "official" specificity of 100, but they are also the last styles in order, so they often receive preferential treatment!

<h2 style="background-color: green">It's not so easy, being green!</h2>

In your test file, add a style to the h1 tag making the text blue:

<h1 style="color:blue" id="redzone" class="hilite">Hello, Specificity!</h1>

Which of the four conflicting rules wins? Try moving the style rule in the h1 tag to a position at the end of the tag. Does that make a difference? Why, or why not?

Want to break all the rules? You can trump them all by putting !important in your rule. This gives your rule a specificity of 10,000!

p .warning { color: red !important; /* Specificity: 10,011 */ background-color: yellow; /* Specificity: 11 */ text-weight: 900;} /* Specificity: 11 */

!important also permits you to override the order and inheritance rules.

Now change the h1 style declaration by adding !important to it:

h1 {color: gray !important;}

Which of the five rules for h1 wins?