Introduction to Style Sheets

This document assumes some familiarity with HTML.

Style sheets contain information about what a webpage should look like. A single style sheet can be used by many webpages. Changes to your style sheet will alter the appearance of the webpages that import your style sheet. The World Wide Web Consortium has a style sheet demo page that allows you to see different style sheets in action.

Here is a very basic style sheet-

body {
    color:              black;
    background-color:   white;
}

This style sheet specifies what content within the BODY tag should look like. Practically speaking, making changes to the BODY tag alters the appearance of your entire webpage.

Please note- that is the entire style sheet document. It is a plain text document. Do not put HTML code in your style sheet.

You could copy the style sheet example above and save it to a file on your server. Let's say you saved it to a file with the URL http://example.com/stylesheet.css . You could then import your style sheet into your webpages by adding the following text to the HEAD section of your webpages-

<link rel="stylesheet" type="text/css" href="http://example.com/stylesheet.css">

The example above just scratches the surface of what you can do with style sheets. For one thing, there are many more properties that you can define. Let's extend the above style sheet-

body {
    color:              black;
    background-color:   white;
    background-image:   url(http://example.com/background.gif);
    font-family:        Arial;
    font-size:          10pt;
    font-style:		italic;
    font-weight:        bold;
}

This example extends the earlier style sheet by specifying a background image as well as default font properties.

You can use style sheets to alter the properties of any HTML tag. For example, if you wanted to change the LINK and VLINK colors, you could add the following to your style sheet-

a:link {
    color: blue; 
}

a:visited {
    color: purple;
}

For more information about style sheets, please visit the World Wide Web Consortium.

Style Sheet Examples

Interactive Style Sheet Demo

Using Style Sheets with DiscussionApps

Using Style Sheets with DBApps

Using Style Sheets with NewsApps

Please post questions regarding style sheets on the HTML Tips & Tricks Forum.