Friday, February 06, 2009

If the Cake is the HTML, the Frosting with the Strawberries is the CSS

A cake shaped flash drive sold at Amazon

I thought the fancy shaped flash drive and the Victorian era paper doll kit below, both demonstrate the relationship between CSS and HTML well. My little sister loved these paper dolls when she was young. She and her friends spent hours making new dresses for their favorite paper dolls. When we style our sites, we are essentially performing a very similar task to my kid sister who painstakingly drew and colored outfits for her paper doll. Think of the paper doll as the HTML and all her different outfits as CSS. When you dress up the doll in different styled outfits, she'll look different but "she" does not change. Beneath the fancy clothes, it's still the same girl.

CSS to an HTML document, is similar to a dress is for the paper doll. The purpose for the CSS or the paper dress is the same, to present the same content in different ways.

The paper doll girl stays the same, only what she wears changes. Your HTML and content stay the same, in other words you will tell the user the same things but using different colors, background images, fonts, anything that can make a web page look different.

Thinking of the paper doll analogy, the doll can change her outfits as many times as she'd like, just like you can apply many different CSS styles to a document.

Simply put, CSS is presentation.

In CSS Zen Garden, Dave Shea and his participating programmers through the use of the same HTML document but different CSS style sheets have produced strikingly different and beautiful results.

As a quick reference, I've included two images reduced in size from Zen Garden designs. To view them in full resolution, please visit the Zen Garden.

Centerfold by John Oxton

Mozart by Andrew Brundle

Post a Comment