So, now we've learned how to structure a Style Declaration. But how do we get our web page to see them?

There are three main ways to include Style Sheets in your webpage.

1. Linking
2. Inclusion
3. Inline Style Statements

Linking

In this method the Style Sheet is a separate document, created as a text file and saved with the (.css) file extension. You create it exactly as you would a new HTML page, using a simple text editor.

To use this method, we have to learn a new HTML tag - the LINK tag.

The LINK tag is an empty tag, not requiring a matching closing tag. It can only be placed within the HEAD of the HTML page. It can not contain other active HTML, and takes the following attributes:

1. REL
2. TYPE
3. HREF
4. TITLE

LINK tags can be used for many other purposes, but we're only going to discuss them in relation to Style Sheets at this time. By linking an HTML page to a CSS page in this way, you are basically saying "include the contents of this style sheet in this HTML page".

REL
The REL attribute indicates the relationship between this page and the LINKed page. In this case the appropriate value is:
stylesheet

TYPE

The TYPE attribute indicates what type of document this LINK is pointing to. In this case the appropriate value is:
text/css

HREF

The HREF attribute indicates the location of the LINKed file. This is exactly like the HREF attribute of the A tag, and follows all the same rules for absolute and relative paths.

TITLE

The TITLE attribute is optional, and defines a TITLE for the LINKed file. This won't make much difference to you at this point, but should be remembered if you ever progress to JavaScripting or other actual programming. The value may be any valid text name - but avoid punctuation and spaces.

Inclusion

In this method the Style Sheet is a part of the HEAD of your HTML page. You are basically declaring all your preferred STYLES at the beginning of the document, saying "use these STYLES in this page".

To use this method, we have to learn a new HTML tag - the STYLE tag.

The STYLE tag is a container tag, requiring a matching closing tag. It can only be placed within the HEAD of the HTML page. It can not contain other active HTML, and takes the following attributes:

1. TYPE

Within the STYLE tag you put your STYLE declarations, exactly as outlined in the previous page.

Because not all browsers are able to recognize STYLE tags, they will usually ignore the STYLE tag itself, but may become confused by the contents of the tag. Thus, it is wise at this point to nest HTML comment tags within the STYLE tag to hide the actual STYLE declarations.

TYPE

The TYPE attribute indicates what type of document this STYLE is. In this case the appropriate value is:
text/css

Within the STYLE tags are your STYLE declarations, formatted as discussed previously. You can include as many as you wish.

In-line STYLE statements

This method embeds the STYLE statement directly into the tag you want it to effect. It can be used with most HTML tags, although we've only discussed STYLES for text, so you can basically think of this as adding a new attribute for any HTML tag which can contain text. These include P, B, H1-7, TD, and even the BODY tag.

STYLE

Acting as an attribute to the HTML tag, the value may be any valid STYLE declaration. Formatting is slightly different from the STYLE declarations we have discussed, since they must be contained all on one line. Curly brackets ( { } ) are not required, but properties and values are still separated by colons ( : ) and multiple properties should be separated by semi-colons ( ; ).

So, which method should we use?

Well, In-Line Style Statements are useful if you are only trying to set the Style for a small bit of text, but they are even more unwieldy than FONT tags and require more typing. Inclusion is fine for setting the STYLE of a single page, and has plenty of flexibility. But imagine that you've got a site with 50 pages.. if you want to set the STYLE for the whole site, it would be a major pain in the neck to go through each of those 50 pages each time you wanted to change something.

Considering that we've only really discussed using Style Sheets for text formatting, and that even the major browsers still don't fully support CSS, Linking provides us with the best use of the advantages of Style Sheets.

With Linking, we create one central document which defines how we want the text on our site to look. By placing the LINK tag in the HEAD of every HTML page, we point them all at the same place. So when we decide that, no, we really did want Helvetica to be our main font instead of Verdana, all we have to change is one file - the Style Sheet - and voila, the text across the whole site now reflects that change.

Using WordPad, open up the Style Sheet for this site, named "basic2000.css" and play around with it. Once you've changed a few things, save it, return to this page in your browser, and hit refresh.