Constructing a Style Sheet

Style Sheets consist of code which browsers use to format the HTML in your document and present it to the viewer. While CSS is not complicated, as with all code there are a few basic terms to learn and rules to follow. 

Terminology
New terminology is always confusing - but getting it right is vital. This next section introduces the terminology associated with CSS. If you get a bit confused at first please persist - get this lot into your head and the rest of CSS is a snip! You will be introduced to the following terms, as they apply to CSS:

• Rule
• Selector and Declaration
• Property and Value
• Class and ID

A simple Style Sheet

Let's look at a very simple style sheet, for this example an embedded Style Sheet - one that would be placed in the head of a document - which controls the appearance of Heading 1, or the tag <H1>. 

We will use this example for much of this section so have a careful look at it.

<style type="text/css">
H1{font-family: Verdana, Helvetica, sans-serif; color: red; font-weight: bold;}
</style>

The opening and closing tags - <style type="text/css"> and </style> simply tell the browser that this is an embedded style sheet. 

Exercise
Create a new page in FrontPage now. Paste the style sheet above just over the </head> tag of your page in HTML view (you may need to paste it into Notepad first to retain the formatting). 

Now type a few words into the page in normal view and highlight them. From the drop down formatting menu choose Heading 1.

You should have a large, bold, red, statement.

A Few Words

Now, on to a closer look at how that was acheived.

Rules

A style sheet consists of a series of rules that will be interpreted by the browser to display the content of your page. 

This particular Style Sheet has just a single rule which tells the browser how any text surrounded by the <H1></H1> tags should appear. 

Selectors and Declarations

Each rule in a style sheet must have two components - a selector and a declaration.

H1, or the tag whose style is defined, is referred to as a selector. Any HTML tag can be a selector.

Every thing within the curly braces {} is referred to as the declaration. 

Look very carefully at how it is written: the selector, followed by the declaration in curly braces: 

H1 {font-family: Verdana, Helvetica, sans-serif; color: red; font-weight: bold;}

Properties and Values

The declaration in turn consists of a series of properties and their associated values. 

In our simple style sheet three properties for H1 and their associated values are defined. The properties and their values are as below:

Again look very carefully at how the property and value are written: the property is always followed by a colon and the value or values by a semicolon. 

H1 {font-family: Verdana, Helvetica, sans-serif; color: red; font-weight: bold;}

In most cases a property will have only one value - eg color: red, - but in the case of font-family it is common practice to have a series of values. In our example the style sheet tells the browser to look first for Verdana, if that is not there look for Helvetica, if that fails use any san serif font. Where several alternate fonts are specified like this a comma separates them.

font-family: Verdana, Helvetica, sans-serif;


Class and ID

As mentioned above any HTML tag can be used as a selector. But suppose you are looking for even more than that - for example suppose instead of defining one rule for H1 you would like to have 2 different H1 styles from which you could pick and choose at will. This is where Class comes in and it is one of the most powerful and important aspects of CSS.

In our example let's say we want to specify two different types of H1 style. We can alter our style sheet to read:

<style type="text/css">
H1 {font-family: Verdana, Helvetica, sans-serif; color: red; font-weight: bold;}
H1.two {font-family: Verdana, Helvetica, sans-serif; color: green; font-weight: normal;}
</style>

In this case 'two' is a  class of H1, or an alternative style rule for H1.

Now we can choose from the two Heading 1 styles in our document by making a small change to the <H1> tag.

If we want to use the first style we would simply select Heading 1 from the formatting menu to get this code:

and this effect:

This is a red, bold, headline

If we want to use the second style we can start by applying Heading 1 from the formatting menu, the switch to html view and make a small alteration to the code for that heading:

This is what we would find:

<H1>This is a green, normal, headline.</H1>

This is a green, normal, headline

If you take a look at the code on this page you will see that style sheet in action.

Naming Classes

You can use any title you like for your class: one, two, first, second, red, green, monkey, giraffe - literally anything. As long as you use the same title in your HTML tag it will be recognized.

Once again note carefully the way it is written.

In the Style Sheet the class is specified immediately after its selector and separated from it by a full stop (period). In the body tag you simply insert 'class=classname' after the name of the tag.

You can use the different classes as often and as much as you like in your documents. If you had a mind to there is no reason why you could not have 20 classes of H1, or of any other tag. This is where class differs from ID. 

Using ID

Unlike classes an ID can only be used once. So suppose you are happy with your big, bold, red headline but on just one occasion in a page you want it to be different. In this case you might choose to use an ID. Your style sheet would now read:

<style type="text/css">
H1{font-family: Verdana, Helvetica, sans-serif; color: red; font-weight: bold;}
H1#other{font-family: Verdana, Helvetica, sans-serif; color: green; font-weight: normal;}
</style>

Now on the one occasion where you wished to use the green headline you would alter the <H1> tag to read:
<H1 ID=other>This is a green, normal, headline.</H1>

Again note the format: ID is specified by putting '#' between the selector and the name of the chosen ID. Again you can give the ID any title you like.

Which to choose? Class or ID?
The primary difference between class and ID is that the former can be used as often as you like - you can only use ID once in a page.

So if you are creating a variation in style that you are going to use again and again then choose class, if you are just creating a one off variation then choose ID. It might seem that there is little advantage in bothering with ID but it does save a lot of fiddling with tags if you are only going to use the variation once. However classes are much more important, more useful and more widely used.

Important Note
You can only use Class and ID in embedded and linked sheets - not in local  styles.