Stylesheets

School of Geography, University of Leeds


Stylesheets are used, for example on the School site, to make pages look similar.

They are an absolute minefield, however, most people use them, so it's worth spending some time understanding them.

Stylesheets separate the look of a site from the content. They are simply a text file (with a .css extension) that says 'for each tag of such-and-such a type, use such-and-such design details with the content. For example, colour each <H4> header red, and put it in Impact font style.

The stylesheet is referenced at the top of each html file you want to apply it to. You can use the same stylesheet on lots of pages.

You use no other style information in the html file. What this means is that lots of pages can be changed very quickly, by just changing the one stylesheet they all refer to.

The problem with stylesheets is that support for some elements is different across browsers.

Old browsers will simply show the standard html, while Internet Explorer and Firefox layout some of the elements that you can change in different ways (such as border widths and text positions on the screen). However, they are great for simple stuff like colouring text and changing backgrounds.

We won't go into how you write stylesheets here, you can find out more from w3School or the W3 consortium.


How to make your pages match the rest of a site

First, don't use any style information in your pages

This includes the <FONT> tag and colour information. Anything you write into a html file will take precedence over the stylesheets. If you use a WYSIWYG editor, you may have to strip this information out by hand. Don't ever use Word to make proper webpages.

Second, place the stylesheet tag between your file's <HEAD></HEAD> tags after the TITLE.

The School's main stylesheet for documents uses the tag...

<LINK rel="stylesheet" href="http://www.geog.leeds.ac.uk/style/docstyle1.css" type="text/css">

If you add this and reload your page, it should now be coloured like this one.

Try adding the stylesheet tag above to your webpage, and see what changes and what doesn't.


Go on to learn about Imagemaps.

[School of Geography homepage] [Leeds University homepage]