By the Way

There are just a few more things you need to know about CSS...

Under the Circumstances

You can take even more control over you elements by using what I'm going to call their circumstances. A very common set of circumstances (that I use in fact) are those of the A tag. It has four circumstnaces, named LINK, VISITED, ACTIVE and HOVER. The first three you should remember from their use in the BODY tag, but the last one is new. A link is in its HOVER circumstance when the mouse is over it.

By defining different properties for each circumstance, the text will appear differently. For example, here's some code from the HTML Central style sheet:

A:LINK { COLOR: #0000FF }
A:VISITED { COLOR: #800080 }
A:HOVER { COLOR: #FF8401 }

When the mouse hovers over a link, it's colour changes to that specified in the A:HOVER definition. Note that the syntax is always the same when using circumstances: ELEMENT:CIRCUMSTANCE.

Now the bad news - this only works in Internet Explorer. Netscape does not seem to like circumstances at all, at least not in its current version. You can still use them though - the links display fine in NN, they just won't change colours.

More generally speaking, you can use two circumstances with practically any element. They are called FIRST-LINE and FIRST-LETTER - these apply formatting to, well, it's pretty obvious. The bad news: neither Netscape nor Internet Explorer support them. Only Opera (a relatively rare browser which you actually have to pay for!) is good and sticks to the specification by supporting them. So they're fairly useless really. Sorry.

Reusing Elements

If you want to use the same element name for many types of formatting, you could use classes or ID's. These effectively let you define sub-elements as if they were completely separate. Let's start with classes - put the element name, a dot and then a name for the class (it can be anything you like):

P.RED { FONT-COLOR: #FF0000 }
P.GREEN { FONT-COLOR: #008000 }

Of course, now just putting <P> in your HTML documents won't be much good because the browser won't know which one to use. To tell it, add a class attribute with the name:

<P CLASS="RED">This text will be red</P>

Alternatively you could use ID's. These work in exactly the same way except that instead of a dot you'll need a hash sign and instead of a CLASS attribute you need an ID attribute. For example:

P#1 { FONT-COLOR: #FF0000 }
P#2 { FONT-COLOR: #008000 }

<P ID="1">This text will be red</P>

Contextual Elements

You may want elements to appear differently if they're placed within other elements. For example, HIGHLIGHT should appear one way if it's on its own but another if it's placed within a P tag. The code to do that looks like this:

HIGHLIGHT { FONT-WEIGHT: BOLD }
P HIGHLIGHT { FONT-WEIGHT: BOLD; FONT-COLOR: #FF0000 }

Another good way to use this technique is with nested lists. We'll look at properties you can use with lists in a future tutorial.

Browser Problems

You've now learnt a fair bit about CSS, so it's time to look at all the various properties that you can use to define your elements. Before we do though, I need to tell you some bad news.

As you saw above, some browsers don't support parts of the CSS code. In fact support for the various properties can vary wildly, even in the latest versions (especially on the Macintosh platform). Why Microsoft and Netscape can't just adhere to the specs is beyond me, but until they do CSS can be very tricky.

Don't be surprised if you pages display very differently in the different browsers. You just have to come to a compromise and try to stick to the common properties that are widly supported.

To help you do this, there's an invaluable web page which lists all the properties in the CSS1 spec (there is a version 2 but support for that is virutally non-existant) and tells you which browsers support them. The URL is http://www.webreview.com/style/index.shtml - scroll down until you find The Master Grid. That site has also got some other CSS and HTML information which you may find useful, including a complete listing of the CSS properties.

In the next few tutorials, I'll go over some of the most useful properties supported by the latest versions of the major browsers (unless otherwise stated).