How to use simple CSS

I'm often asked how to use simple CSS to enhance the look and feel of a basic HTML web page, or perhaps one built using a proprietary template system like the SiteSell SiteBuilder. In this article I provide a brief practical introduction to this versatile website development language.

CSS stands for Cascading Style Sheets, and for the moment the important word is style. It's a slight over-simplification, but I always say that that CSS is about what things look like, whilst HTML is about what things do. You can't use CSS to bring new HTML elements into existence, only to change the appearance and position of existing ones.

The topics that I'll discuss in this article are:

• Changing headline colours and font sizes
• Changing body text colour, font style and size
• Changing link colours
• Setting a background colour or image for your site
• Putting CSS directly into your page source
• Using an external CSS stylesheet file
• Where to place your simple CSS

This list is obviously far from complete, but I hope that it covers most of the simple CSS that absolute beginners need to know. It's not my intention to present an 'in-depth' or 'first principles' discussion, but merely to provide a practical introduction by example.

Changing headline colours and font sizes

Here are a few simple CSS statements that change the colour and font size of your headlines:

In the example taken from this site, note the spelling of color, and the hexadecimal code used to specify it. This must always be preceded by the hash mark (#), otherwise it will be ignored.

Note also that (with a few exceptions) you don't use quotes in CSS, as you would in HTML.

Changing body text colour, font style and size

Here's some more CSS that changes the colour, font style and size of your body text:

This example may be easily adapted for other font sizes, styles and colours. You may omit either font or color, and the font family, but if you specify the font family you must also specify the size.

Notice that I've specified a list of font faces, or font families, separated by commas. This is because your visitor's browser will display only those fonts which are installed on his or her computer. Whilst it's fairly safe to specify any font in common use, it's best to give a list of alternatives, in decreasing order of preference, in case your first choice isn't available.

Since this article was first written there have been developments that mean that you are no longer restricted to using fonts which are installed on your visitor's computer. However, the method by which this is achieved is beyond the scope of this basic treatment of the subject.

Note too the abbreviated colour code #000. This is equivalent to #000000, which represents black, the default colour for text. Where the two digits in each of the three pairs which make up the code are the same, you may omit one of them. For example, if I wished to use the colour #aabbcc (a rather pleasing shade of blue-grey), I could specify it as #abc instead.

Changing link colours

A little simple CSS is all that you need to change your link colours (and to determine whether or not the links are underlined):

Again the example is taken from this site. You must specify the styles in this order, or the code won't work properly.

Link is the default colour, and changes to visited when the linked page is visited. Hover is the colour that the link text goes when you hover your pointer over it, and active is the colour that it goes (briefly) as the link is actually being clicked on and followed.

You may notice that in Internet Explorer the link is left as active until another link is made active, but you should see the correct colour changes in other browsers.

Setting a background colour or image for your site

Here's some code that will change the colour of your site background:

...and here's how to set a background image:

This example assumes that your background image background.jpg is held in the /images folder.

Putting CSS directly into your page source

If you're putting your CSS directly into your page source you must enclose the style statements within <style> and </style> tags:

You would have to put this code on each page where you want it to apply (which could, of course, be every page on your website), and you may find it more convenient to use an external CSS stylesheet file.

It's also possible to apply simple CSS styling to one specific instance of an HTML element by using the style attribute:

Using an external CSS stylesheet file

The advantage of an external CSS stylesheet file is that you need to write your CSS statements only once. If you then wish to amend them, all that's required to make a site-wide change is to edit and re-upload your file.

To create your stylesheet file you can use a normal text editor, or a CSS editor like TopStyle Lite. This is a free download, and you should be able to find it through your favourite search engine.

You should input your CSS statements, but not the <style> and </style> tags, and save the file with the .css extension. Upload the stylesheet to the appropriate folder on your website, and reference it on each page:

This example assumes that you've uploaded your CSS stylesheet file to the /support-files folder.

You can, of course, use an external stylesheet file referenced on each page, and extra CSS statements (including references to other stylesheet files) on individual pages where required.

Where to place your simple CSS

This article wouldn't be complete without a brief word on placement. The 'rules' of CSS are a little complicated (and appear to be interpreted slightly differently by different browsers), and are therefore probably outside the scope of an article on simple CSS.

That said, as a general rule CSS statements intended to override existing styling should be placed after the code that they're designed to override.

However, there is another consideration:

The ideal place to put your CSS is in the <head> of your page, but I'm aware that not everyone has access to this. If you do have to place it in the <body> of your page, then it's best to do so as near to the beginning of your page source code as you can, and if possible before the HTML elements whose appearance it's intended to affect.

This will ensure that your page will appear as you intend as it loads. If your CSS is placed later in the page source, you may see the page change its appearance during the load process as your code takes effect, particularly if it takes some time.

Users of SiteSell's Site Designer may use the Add Custom CSS facility to incorporate their own CSS into their default stylesheets following the existing statements.