Learning to Use CSS Styles

All the examples linked here use the same HTML page, with exactly the same markup. The only thing that changes is the style sheet that is linked to the page.

The HTML page has exactly four custom class defined. They are:

• page-heading
• nav
• maincontent
• footer

You can easily figure out which cells (TDs) these classes are applied to. The table on the Web page has only four cells. Each cell is assigned one of the four custom classes. Please download the page and the style sheets to see how everything works.

The style sheets (right-click to save/download the file):

• Plain: No style sheet linked to this page
• Simple: graystyle.css
• Medium: okaystyle.css
• High Skill: coolstyle.css

To learn from these four examples, download the three CSS style sheets and compare them. You may want to print them out. Look at the four HTML files linked in the navigation list on the left side of this page and compare what each style sheet does to the appearance of the page.