Introduction to CSS

What is CSS?

There was a time when most websites used technology no more complicated than a Microsoft Word table. A three column table created a three column layout for a site, and if you needed to insert a full width image (perhaps for a header) you just needed to merge three cells and slap it in. Save this layout as an html file and there you had a simple website.

There is still nothing fundamentally wrong with this approach, today many older sites still use a table layout successfully. But the world has moved on, and most modern websites today use a combination of html code and CSS.

CSS stands for Cascading Style Sheets, and these mysterious things now control the design of most modern websites. But why is this technology useful and how does it work?

How CSS works

Most html based websites today are split into two distinct elements – the content (such as the raw text and images), and the styling features (such as layout, text size, fonts, borders, positioning and more).

To explain in some more depth here is a simple example using a single word:

Hello

The html element of the word above is simply the invidual letters and their order, nothing more.
The CSS elements include the font type (Verdana) and the the font size (20 pixels).

This seems like an unnecessary development, but splitting web pages into separate style and content areas has several large advantages over the traditional table design...

• Updating the style of a large number of pages suddenly becomes a very easy job. For example if you wanted to change the font of all page titles in a 500 page site you could do this with a few mouse clicks, rather than going through every page individually and manually changing the fornatting.

• Loading time of wesites is directly related to the amount of data which has to be downloaded. If you keep all the styling information in one file it prevents repetition across pages, and thus keeps the file size to a minimum and makes load time speedy.

Style over substance?

The additional benefit of CSS is the ability to create complex and beautiful designs which aren't constrained by the simple block approach of a table. Pages can be built on layers, can have hidden areas and can even be animated. Suddenly CSS becomes quite an exciting possibility. A good CSS site is also cross browser compatible, so will display well whether you're viewing it on a mobile phone or on a laptop.

What's next?

CSS is still in it's infancy and a major update is on its way. CSS 3 will be linked to HTML 5.0 and this technology is already being used in devices such as the iPad. These new versions will permit complex styling features to be used without the hacks and tricks that were previoulsy required to make the really snazzy effects such as shadows, blurry edges, and 3D effects.