css Zen Garden: A Comic Twist is to date one of the coolest implementations of the Zen Garden project. The project is simple: take one html page and separate the design from the content. There are thus hundreds and hundreds of designs for this one web page, all enacted simply by switching up the stylesheet.

See the Color Change in the top right corner. I really like the simplicity of this.

It is just lines like this:
<span style=”background: #eeeeee; border: 2px solid #006699″>
<a href=”#” onclick=”setActiveStyleSheet(‘default’)” title=”default” style=”text-decoration: none;”>&nbsp;&nbsp;&nbsp;</a>
</span>

and then this javascript kicks in to manage the change: http://www.deanesmay.com/styleswitcher.js

Excellent introductory css course called: CSS 101: Cascading Style Sheet Beginner’s Course. Ever notice that out of the millions of pages on the web you wind up at a handful over and over? This is one worth some time.

We sometimes lament the fact that we just don’t seem to have that “magic” that makes a site look good and clean. We often wonder is it an inate talent? Is it something that can be learned? How do you get better at it? This site explains a redesign: Maki. I wonder what I can learn from studying her thought process? Colors inspired by nature, the look simple and clean …

Some of the cooler looking sites sometimes use transparent layers/div’s to achieve the look. One method to get a transparent background is to use a png image with partial tranparency (see a discussion of that here). Unfortunately, Internet Explorer doesn’t much like png’s unless you go a bit to make them work.

You can also make Semi-Transparent Backgrounds with CSS and they are supported on FireBird/FireFox/Mozilla/Netscape, Internet Explorer, and Konquerer/Safari. I don’t currently run Opera, but I understand they are not currently permitting it.

I have been working on understanding CSS (Cascading Style Sheets) better as they appear to be where it is at for good web design. I really enjoy looking around the Zen Garden Project and the Word Press CSS Contest. These are awesome examples of style separated from content.

One of the things that tended to confuse me was the use of three character colors in Cascading Style Sheets. What did #fff mean? Well it took a bit of digging, but I think I have it now. The math majors tell me that if you use a six character red, green, blue (or RGB as commonly referred to) color scheme, you need six characters to form 16,000,000 colors. Conversely if you limit yourself to a 256 color web-safe palette, you need only use three characters. So the CSS wizards decided you could avoid needless repetition by simply using the shortcut method.

In case there is any confusion, you simply give the first letter of each color pair (example f in a three character RGB color would become ff) is simply repeated. So it is #RRGGBB. Hex numbers are represented by the characters 0-9 and letters A-F, for a total of 16 characters. So long as you are satisfied with staying within the color cube, using the three character color codes in CSS will make for smaller file sizes and less typing.

I have posted a new “tutorial” although it is really just an accumulations of findings I had in trying to solve the broken box model in Internet Explorer 5. This results in problems for css layout sites when viewed in IE5 unless some adjustment is made. In this article, The Box Model Hack and other solutions to fixing the IE5 problem with CSS layout: HTML FIX IT . COM, I attempt to cover the very basic of five ways I found to get around the problem. I hope it is helpful to you.