My Adventure with CSS (Cascading Style Sheets)  by Jeanette Holmes

Several months ago I didn't know CSS existed. Having a strong programming background, I was a little leery of adding another level of complexity to the code for my sites, but I also know the value of not having to modify the basic code continually. So, I decided to give CSS a try. At first I used it only for backgrounds that were repeated on several web pages. Then, when I was having trouble lining up my Flash file with the background I had selected, I logged on to www.WebDesignForums.net and asked if anyone knew about the problem and would share a solution. I ended up finding out what caused the problem myself (a comment line at the top of my HTML), but I received a gentle suggestion that I stop using table designs and switch to CSS. It was supposed to be easier.

That is when I found out about The Zen Garden at www.csszengarden.com. After I converted my entire site to use CSS, I decided to try for a submission to Zen Garden. It is an excellent way to learn what CSS is truly about. It was inspiring to see beauty emerge from outside the structure by creating a CSS file only.

I have submitted four designs. The verbiage that is displayed is constant (written by Dave Shea), but the display is unique based on the CSS file that each individual artist creates. (In order for you to view my work and still navigate my site, I changed the sample HTML navigation list.....but that is all I had to change and I created four unique designs!)

I hope to have at least one of my designs published as a Zen Garden design, maybe even an official design, who knows?  I will keep you posted and let you know if it happens, or not. They are swamped with entries, so it may take a while. Nevertheless, I have learned from this experience and that is what's important.

My conclusion on whether or not CSS is worth it? It is. For the main reason that I started looking at it in the first place. I can specify the formatting of the data, separate from the data itself. If I want all paragraphs to be in one font and all headings to be in another font, I only have to list the font once for headings and once for paragraphs, not once for each heading and once for each set of paragraphs. It makes the code easier to read and easier to maintain, but it is not easier to write the CSS. Please send an E-mail and let me know what you think of my efforts.

I decided to create the rest of my portfolio using the same concept that is used for the Zen Garden designs.

Lessons Learned

For my own purposes, I decided to start of list of the important lessons I have learned. If you are technical, you may already be aware of these things or you may find them of interest. If you are non-technical, feel free to ignore the list, even though some may not end up being technical at all (e.g., the first one).

1. Nothing is perfect (perfectionists, like me, have a hard time with this one).
2. Do NOT put a blank line or a comment line at the top of your HTML.
3. IE 6 Does not support a fixed background except for the body tag.
4. IE 6 Does not format DIV elements consistently as the same size block elements if any of the data overflows the "cells", by the tiniest of margins. It has to be defined with perfect width and height values or the table formatted with the block elements does not look like a table at all. NOTE: This is corrected in IE 7.
5. For testing screen widths, window.screen.width is not reset based on temporary resizing. It is always set to your physical screen size.
6. Firefox kept on ignoring a link to another page. I removed the float in CSS and it worked! Go Figure!

Copyright © 2006-2007 Infinite Designs. All rights reserved.
Revised: January 01, 2007