Audience Dialogue

Cascading Stylesheets (CSS)
Properties that work

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 Properties

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

Text Properties

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

Block formatting

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

Colours

color HEXCOLOUR | COLOURNAME | RGB
background-image URL
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.

Rave

CSS was designed to separate content from presentation on web pages, to generally simplify the web development process. Or was it? In our view, one of the main reasons why the Web took off so quickly was that HTML (the language in which most web pages are written) was so easy to write - originally. We get the impression that professional programmers didn't like the idea that anybody could create their own web sites. It was far too easy! It had to be made so difficult that only professionals would have the patience to do it, because the complexity would drive everybody else crazy. So they did their best to make it harder, using concepts such as XML, XHTML, XSLT, CSS, and so on.

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.)

Links and other information sources

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)

Overview from Eric Meyer, a leading CSS expert

The official w3.org spec (not easy to interpret).