Creating a Cascading Style Sheet (CSS)

The first thing you need is a file with the style sheet. The extension for this type of files is .css, and it is just a text file like the HTML files. You could call it something like styling.css.

There is no requirement as to where you place the file. It is an advantage to have it in a directory for css files, but there is no formal requrement. I usually use a directory named StyleSheets, but that is entirely up to you. The important part is that you know where the file is placed and you don't move it around.

The way to make a page use a style sheet, is by linking to it in the HEAD tag. For the style sheet named styling.css in the directory StyleSheets, the syntax looks like this:


When the page is read by the browser, the style sheet is uploaded at the same time, and the page is formatted according to the instructions.

Formatting of a style sheet entails three different types: tags, classses and IDs.

Tags are tags as we know them, e.g. TABLE and H1, where you specify e.g. that the headline H1 always has to be bold and italic.

You may, however, need formatting of several types of cells in a table. Then formatting the tag TD is no good, because then all cells wil be alike. Here you define a class for each type of cell. To make the tag use the class, you use the attribute CLASS. If you have a class of cells called GreyBackground, you make the cell, i.e. the TD tag, use it by writing <TD CLASS="GreyBackground">.

IDs work exactly like class, only you use the attribute ID, so for the GreyBackground as an ID the syntax is <TD ID="GreyBackground">. ID is something you normally only use when working with fields using ID already, e.g. reading and writing to fields.

IMPORTANT! No spaces in the names of classes and IDs!

In the css file you use the variable available for the attribute STYLE for the tag. These you obviously have to look up for the various tags, to ensure that they are valid. For tags you use the following syntax:


For classes the syntax is:


For IDs the syntax is:


Notice that there is a dot before the class name and hash symbol before the ID name. This is how the browsers can tell tags, classes and IDs apart, when reading the file.

Let's say that we need the main headline on the site (the tag named H1) to be in bold, italic, use the font type Verdana and have the font size 24 pt. This is written like this:


Notice that what is written between { and } is exactly the same as what you write in your STYLE="" for the tags. In the css file you usually write each variable on a new line, and with indent, as shown in the example, but this is not a requirement for the functionality. This is only to make the code readable.

The syntax for classes and IDs is exactly the same as for tags. Let's say that in a table we need cells with a grey background and bold letters with the font type Verdana, in font size 14, for the header, and normal Verdana, font size 10 on white background, for the other cells. For the sake of clarity we can call them GreyCell and WhiteCell. In the css file it looks like this:

Links have a special status in regards to style sheets, as you have a number of additional options. The A tag can be styled as shown above, but because links are made to show that there is a link, among other things, and not just text, and additionally indicate whether the links has been clicked before or not, there are some additional options.

The syntax is as follows:

What the link looks like, when you haven't visited the linked page (from this page or otherwise):


What the link looks like, when you have visited the linked page:


What the link looks like, when you hold the pointer over it:


What the link looks like, when you click on it:


Here you should be aware that in the css file, A:active has to be before A:hover to work properly.

Hover also works with other tags, e.g. DIV, but only with new browsers. This is especially used for navigation panes, e.g. drop down menus, where you dont have a link but need sub menu to drop down and make the underlying links available. The wide spread use of tablet computers and smartphones, where you have no pointer to hover over an item, means that the use of hover should be limited to use on links. Tablets and smartphones can to some extent convert the hover effect to act as ONCLICK, but it doesn't work too well, so it should be avoided.