Ideally you will have a CSS validator before writing css scripts, if only to save yourself the problems of trying to learn how different browsers will interpret the output. [I use TopStyle CSS as it integrates with the editor I use]

The only other option is to try it and see - this can be fun, but tends to be incredibly frustrating when things don't go right. This is especially true if you want to include page borders, side menus, frames etc.

The following image is one of the css files for this site:

Don't jump back! It is not as bad as it seems.

The first thing to note is that there are three sections in the example, each followed by { } (curly brackets). The contents of the brackets are 'statements' defining the 'elements' of the page; The 'elements' for this style sheet are the BODY of the document, the 'A' or Anchor link and the A:HOVER (hover mouse pointer over active link).

The body statements define, in order, the colour of the text (font), the background colour of the page and the font family/ies (and individual fonts) to be displayed. Use more than one font and, ideally, one font family as this allows for your pages to be shown as you want them. If your visitor has not got the font you define on his/her machine or their browser cannot recognise it, the text will be displayed in the browser default font (provided it can interpret your instructions).

This page has white text on a blue background and a choice of fonts to display.

The next section is the active link; for this site they are red with no underlines (text-decoration : none;). The default for links is to have them underlined, but I prefer them this way because I use the next section that makes it obvious that they are links.

A:HOVER is what happens when the mouse pointer (or any other pointing device) passes over the link. In this case the link changes colour to aqua. In both cases the background colour for the link is reinforced as blue as a precaution against the natural background colour degrading or fading as the link changes colour.

Feel free to use this piece of code and experiment with the content - most HTML instructions can be included in a style sheet, but experience says keep them reasonably simple.

When you have made your css file store it with the other files as style.css and remember to add the call line from the HTML example page (link rel="stylesheet" type="text/css" etc.) inside the head section of your html pages.

It is possible and sometimes desirable to have more than one stylesheet file (just name it style1.css and call it from the html page as such). This site uses more than one so that different sections have their own colour coding, simply by changing the background colour of the relevant stylesheet.

Close this page or jump back to Basic coding page for HTML and links to the rest of the code examples.

The individual sections are: Javascript - effects, tricks and problems and The W3C coding conventions - what is meant to happen.

Alternatively, click on the main site links below.