Introduction to Cascading Style Sheets

We will spend quite some time playing with the various styles in this session. By the end of it you will be able to write some styles and apply them.


Setting Up Our Style Sheet

A style sheet has already been created for you. Go to Page Source and examine the link rel= statement in the head of this page. When your browser is looking to see how to style your various tags it will look in this file for instructions. What is the name of the style sheet file?

To see what this page would look like without styles in your Firefox browser, go to View - Page Style - No Style.

The next step is to look at the style sheet. Download both this page and the style sheet to your websig directory. Open the style sheet in TextWrangler. Examine how the styles are formed. Change some of the variables such as size and colour and see how that changes the appearance of this page when you look at it in your browser.

An Introduction to Colours

Check out the W3C School's HTML Color Names Note in the small print at the bottom of this page that there are only 16 valid colour names and that for the others you should use the HEX values presented on this page. Go ahead and try out some of these HEX values on your style sheet.

You should bookmark the W3C School's colour page as well as the site's Home page, since we'll be returning to it regularly.


Back to the home page