Here's a handy CSS table, listing only properties that we have found to work reasonably well on common browsers. After the table, there's a little rave. CSS can be so annoying, it makes you raving mad! It's meant to save time, but @#$%^*& [see the rave]
In the following table, default values are in bold type, specific values are in plain lower-case, and user-specified value categories are in caps, and explained below. When no default is shown, it's determined by the user's browser settings. This table is not comprehensive: it covers only the commonest and most reliable features of CSS, and only those that we've actually tried out.
|font-size||xx-small | x-small| small | medium | large | x-large | xx-large | smaller | larger| LENGTH+UNIT | PERCENTAGE|
|font-family||serif | sans-serif | cursive | monospace | fantasy | FONTNAME|
|font-weight||normal | bold | bolder | lighter | 100 TO 900|
|font-style||normal | italic|
|line height||normal| LENGTH+UNIT | PERCENTAGE|
|text-decoration||none | underline | overline | line-through | blink|
|text-transform||none | capitalize | uppercase | lowercase | smallcaps|
|text-align||left | right | center | justify|
|text-indent||0 | LENGTH+UNIT| PERCENTAGE|
|width||auto | thin | medium | thick | LENGTH+UNIT| PERCENTAGE|
|alignment||left | right | none|
|margin||0 | LENGTH+UNIT | PERCENTAGE | auto|
|padding||0 | LENGTH+UNIT | PERCENTAGE | auto|
|border-width||0 | LENGTH+UNIT|
|border-style||none | hidden | dotted | dashed | solid | double | inset | outset | groove | ridge|
|border-color||none | HEXCOLOUR | COLOURNAME | RGB|
|color||HEXCOLOUR | COLOURNAME | RGB|
|background-color||HEXCOLOUR | COLOURNAME | RGB|
Key to user-entered values
|COLOURNAME||One of these 16 VGA colours: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. The other 130-odd named colours seem to work too.|
|FONTNAME||Preferred font names, with most-preferred font first. Font names including spaces should be enclosed in quotes, e.g. "Trebuchet MS" or 'Times New Roman'. Font families (as above) should be listed last, in desperation. One of us read somewhere that Mac fonts should be listed before PC fonts, e.g. Geneva before Arial, or Times before "Times New Roman" - but not why; still, it's easy to do. Putting one set of quotes around the whole lot doesn't work - e.g "Garamond, Book Antiqua, serif" won't find Book Antiqua.|
|HEXCOLOUR||Colour described by # followed by two hex characters for red, 2 for green, then 2 for blue - eg. #008080 for our logo. See our colour page for common examples. Abbreviation: paired codes, e.g 008800 can be shown as 080, CCFFCC as CFC, etc. In this case, no initial # is needed.|
|LENGTH+UNIT||LENGTH is just a number, and UNIT has several options. The ones that work most consistently are the relative units: em (ems - supposedly the width of a capital M, but usually wider), ex (the height of a lower-case x), and px (pixels - dots on the screen). However, none of these measures is consistent. Absolute measure such as mm and pt (points) are too rigid - users can't change them to suit their screen or vision. Negative numbers work when they make sense (e.g. margins, but not line height. There must be no space between LENGTH and UNIT, e.g. 130px or -0.5em|
|PERCENTAGE||e.g. 100% or 76%. Over 100% may work (where it makes sense) but we haven't tried it.|
|RGB||A colour expressed in the (red, green, blue) system used by older graphics software. Four different formats are possible; we haven't tried any of them.|
You don't understand all that stuff? That's how they like it! It means you'll have to pay a professional instead of doing it yourself. Luckily, the makers of browser software, specially Microsoft, aren't cooperating - though not for any altruistic reason. So old-fashioned HTML will work for years yet, even though it's "deprecated". (That means, that one day in the distant future, it will no longer work.) And in the meantime, we've seen the rise of content management systems and blogging (see our page on these). Their role is, yet again, to make easy what had become difficult.
CSS is a pain to use, because every browser interprets it a little differently, and it's easy to make nasty mistakes by not anticipating users' actions. Ever seen a web page with letters on top of other letters? That's a CSS error. Another is text that you can't resize, with letters too small to read on a monitor.
Any why do browsers interpret it differently? Our view: the specs aren't written clearly enough. The official descriptions are at www.w3.org. If the bureaucratic designers of CSS knew exactly what they meant, they certainly didn't express it clearly! This language shows all the signs of being written by a dysfunctional committee - taking refuge in vagueness whenever controversy arises. Or maybe they just didn't think through how all the elements of CSS would work in combination with each other.
Consequently, when you look for advice on how to use some obscure CSS feature, it's scattered all over the place. It would be nice to see a book or comprehensive website on CSS, saying "if you want to do X, use CSS code Y." Instead, the information is fragmented and/or unclear.
Despite the problems, CSS still has advantages over the old HTML way of describing page presentation. In 2002, by when nearly all our visitors were using browsers of version 5 or above, this site began to use CSS. If you're one of the 2% of our visitors still using a version 4 browser (e.g. Netscape Navigator), this page will look a lot plainer than if you're using a newer browser. (If you want to update your browser software, we recommend Firefox, from www.mozilla.org. Not only can it block pop-up advertising windows, it can even print pages without chopping off the last few characters on the right.)
If you search the web (e.g. "Cascading CSS" in the Open Directory) you'll find thousands of pages - but as most of them date from about 1998, they're not much help with the browsers that people use today. CSS itself hasn't changed, except by adding some extensions (CSS1, CSS2, and soon CSS3), but the browser software has. Here are some of the better CSS1 links we've found (not that any of them are much help when something doesn't work and you're trying to find out why):
w3schools.com (the one we've found most useful - it even shows browser versions that each command works with)
Web Design Group (better explanations of some properties)
Sizzling Jalfrezi (an easy one for beginners)
The official w3.org spec (not easy to interpret).