CSS walk-through tutorial

Snippet of CSS code
Snippet of CSS code.

For those who’ve ever wanted to get into Cascading Style Sheets (CSS) coding, but never quite got around to it, or couldn’t quite grasp what it was all about; or perhaps you just want to know what it is that some of us coders are going on about, Albino Blacksheep’s Live Design tutorial is for you.

What is CSS?

In recent years there has been a drive to separate the content from the design of web pages. That way updates to the look of a site can be made quickly and efficiently. This is done largely using Cascading Style Sheets: text files that explain to the web browser how to present the information on a page, eg make all links blue and underlined, make all headings black, Arial and 24 pt, etc. That way one change of the code in one file can update the look of an entire website.

There is a really good introduction to CSS at www.cssbasics.com. To see a website being transformed step-by-step with CSS look no further than Albino Blacksheep.

In 18 steps Albino Blacksheep (for that must be his/her name) walks visitors through the redesign of the ABS website.

From…

You can see how ABS started like this, with a basic, ‘no-frills’ marked-up page…

screenshot

To…

… to this, graphically pleasing offering. Using nothing more than the power of Cascading Style Sheets (CSS).

screenshot

CSS Zen Garden

Another impressive site, for those who’re unfamiliar with it, is the CSS Zen Garden. The premise of this site is that within each design the HTML page code is always the same, all the designers are allowed to change is the CSS file. Impressive stuff.

Leave a Reply

Your email address will not be published. Required fields are marked *