Illustrating cascading style rules

View the source code to see the complete example.

Colors!

This document has a background color and text (foreground) color for the body. Those colors will be used for any text that is not covered by a more specific rule. This is a paragraph, so it is covered by the rule for paragraphs.

It also has rules for the highest level heading (h1), paragraphs (p), and emphasis (em). It does not have a rule for h2, so second level headings will use the body rule. This is a paragraph, so it is covered by the rule for paragrpahs.

Some of the words in this paragraph are emphasized with em.

The style rules

Some of the colors are named and some are given numerically. The colors set for the body are used for elements such as h2 that do not have their own rules.

        body {background-color: #ffff00; 
              color: red}
        h1 {background-color: #889999; 
            color: black}
        p {background-color: #ffffff;
           color: black}
        em {background-color: maroon; 
            color: #ffff00 }}