Cascading Style Sheets

by Joe Gillespie — Apr 1, 2002

Let's forget the 'cascading' part for the minute and start with the easier bit.

'Style' is a word that means many things to various people. It can make a difference to the clothes you wear or the type of car you drive.

In typography, style can be traditional, grid 'n' grot, avant garde, grunge or many other things but, in essence, it describes the overall 'look and feel' of a page.

In CSS, style has a more basic meaning. It means anything that is not plain 'structure' - call it 'decoration' if you like - the icing on the cake.

Take a bag of flour, some butter, sugar, egg and sultanas, mix them up, bake them and add some icing and a few bits and pieces and what do you get? Well, you have a kid's birthday cake, an afternoon tea cake, a wedding cake or a holiday party cake. The ingredients are basically the same, they are just arranged and presented in different styles. How appealing they are depends on the cook.

If you have used 'styles' in Microsoft Word, Quark XPress or some other program, you will appreciate the fact that you can put together a collection of type specifications - font, size, color, leading, or whatever - and give that particular 'style' a name. A 'style' is a collection of attributes. So, you might have one style called 'body copy', another called 'captions' and others for different levels of headlines, sub heads and so on.

HTML provides the 'structure' of the page and should be devoid of style. This is the basic fruitcake! It has a top, bottom and edge and some contents, but that's about it. Earlier versions of HTML have had both structural and style elements jumbled up with one another, but we are trying hard to get away from that now.

The basic ingredients of a Web page are the words, numbers and pictures – the content. This 'document', as it's called, also has a top, bottom and edges and is usually read from the top down and from left to right – in Western languages anyway. It will probably have parts that are more important than others and this is where the first confusion between structure and style creeps-in. Is a 'heading' part of the structure or part of the style?

The 'function' of a heading is definitely structural - to present information more prominently than the general body copy. In typography, there are many ways to create a hierarchical order of information, the most banal being 'big and bold'. HTML does not dictate 'how' the prominence is achieved, it merely provides a set of heading tags from <h1> down to <h6> - but to add to the confusion, are graded by size and boldness by default - they don't have to be. <h1> can be the same size and weight as your body copy if you like, but displayed in red to make it stand out but then, what if the page is being displayed on a black and white screen? Suffice it to say, that some method of creating prominence is required. The way you achieve it depends on the circumstances.

Structural Elements

Body, table, headings, lists, forms, preformatted, citation, strong, emphasis are all structural elements that describe 'where' and 'how' the information is presented.

Style Elements

Style elements are items such as Font face, size, color, bold, italic, underline, and so on, that describes what it looks like.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float