Thursday 22 April 2004

Zen and the Art of Cascading Style Sheets

Here's a programming post, which hopefully will be both comprehensible and interesting for non-programmers, especially ones who Blog or are thinking of Blogging.

A document, be it an article, a sentence, or a complete blog, can be divided into two parts: the Content, and the Format the content is expressed in.

Here's a simple example: consider the content, Mary had a little lamb.

This could be reified, implemented, published or what you will in a variety of formats, such as:

Mary had a little lamb


Mary had a little lamb
Mary had a little lamb
Mary had
a little lamb


...and so on.

Other content can have the same format, such as

Its fleece was white as snow



So Content and Format are two separate things.

This concept can be extended to much larger documents, such as Blogs. Blogger, for example, provides a number of Templates for anyone blogging to use. These templates provide a number of pre-defined styles. They can be changed at will, but most people don't bother. This is why so many blogs look similar in style. By the way, this blog uses a fairly popular template, but modified a bit so the links go on the left rather than the right. Anyway, all the blogger has to do is specify which template they're going to use when they first create their blog, then just supply content thereafter - the template does all the rest.

The recommended way of doing this in general is with Cascading Style Sheets - css for short. Unfortunately, different browsers - such as Internet Explorer, Opera, and Netscape - interpret CSSs in subtly different ways. But the Gurus of css can make them do miraculous things. Here's some example of exactly the same content, but with different stylesheets applied:

The CSS Zen Garden .....
with the Edo and Tokyo stylesheet applied...
or the 15 Petals stylesheet...
or (my favourite), the Wiggles the Wonder Worm stylesheet.

It's the same content - just expressed in different styles.

No comments: