Testing the Rules of the Cascade

Let's start with some text. If you'll look at this page, you'll notice that I have started with a medium-sized, Georgia font which belongs to the serif font family. However, in some places on this page the presentation is different... some 'sans-serif' examples and font variants will pop up here and there. The color for the document is a dark gray while the background is a soft blue. I have a left and right margin set at 20%. (margin-left: 20%; margin-right: 20%; or try the shorthand margin: property).

• This first line of the list should be dark blue...
• this line should also be blue.
  • This nested list should start out purple.
  • Eventually the list will change color and fonts
  • Like this line which is a dark red, sans-serif font
• We'll end the nested list and come back to that dark blue.
• However, I would like to add a splash of green with some small-caps.

I used an inline style for this line of text. Inline styles will override embedded and external styles unless one uses the !important rule.

This sentence has the same inline styles as the previous sentence but for some reason it has a different look. Must be the !important rule at work. :) The font is much larger too. I used a class selector with this sentence.

This line of text should have an overline using the text-decoration: property.

The paragraph above uses an id selector from the external stylesheet. The text is also centered (text-align: center;), 80% smaller than the rest of the text and in italics.

Wonder why the sections of text that note code are in bold, maroon monospace fonts? I used the <code></code> element and then styled it in the external stylesheet.