~cac6982

Daily CSS Fun

Intro

Every day in the month of February I will be posting a redesign of the index page for this site. In doing so I have held myself to only one rule - the only thing i can change from day to day is the style of the document. From day to day and design to design the underlying html document will not change at all. Why do this you ask? Well, since I wrote the article "Your CSS Bores Me" for ChunkySoup.net I've gotten a lot of feedback from folks who are not sure what CSS can do. While I don't claim to be a designer I think its time to at least attempt to put my money where my mouth is and try and rely on Cascading Style Sheets exclusively.

While these CSS documents will never be too difficult, throughout the course of the month I will also be posting explanations and sketches of what each different style sheet does. These may not come in too timely a fashion (I want you folks to view-source and try and figure things out yourself). However, the detailed explanations will come because my primary goal here is to create a repository of well documented CSS techniques.

Update 02/27

Well, it's not very difficult to see that I didn't exactly stick to my daily upload. It wasn't out of lack of creativity, or due to CSS itself. I really has more to do with the fact that I got pretty bored of looking at this same document over and over again. So instead of the previous scheduled 28 layouts I'm gonna cap the layouts at 20 for the month and concentrate on the explanation of each layout. As this experiment was always less about a nifty style sheet switcher and more about proving that CSS is flexible and worthy of exploration I'm perfectly ok with this change.

Explanation

To begin with it would be best to familiarize yourself with the document I'm going to be working with. It's important that we not only have a validated HTML document, but also that the html tags used were chosen to convey structure and meaning. Can we say markup boys & girls? While I encourage you to turn to the View-Source command in your favorite borwser to look at the HTML I've provided a few other ways of looking at the document.

Once we are comfortable with this document we can then focus our use of CSS to override a browsers default presentation of each of these elements. At its core, CSS is nothing more then that - taking an element out of its normal flow in the document using positioning; changing the elements default behavior using display; applying colors and background images to elements; changing font sizing, faces and spacing. Below, along with each style sheet, I will try and point out the main position structure used. Most of the time that can be done just by placing borders on each div element on the page. I will also highlight other noteworthy changes. Questions are always welcome.