csszengarden.com

The CSS Zen Garden is a basic site. There’s not really any content on it from a words or articles perspective. So what is it? It’s the same site, redesigned by graphics professionals hundreds of times.

Here are a few examples:

Example #1 | Example #2 | Example #3

As you can see, it’s the same website, it just looks different. What’s happening is the site relies on two main files, the index.html document and the CSS (cascading style sheet) document. If you click on the links in “select a design” you’ll be able to see the site in hundreds of different styles (click here to see all styles).

This is what the site looks like without an associated style sheet: plain site. Then a web designer can come along and make a CSS file, which defines how everything looks. This is what a CSS file looks like: CSS file. Don’t be overwhelmed. All it’s saying is that something defined as “body” in the html file is going to have this type of font, with this size, etc.

For example:

body {
font: 8pt/16pt georgia; // font size and face
color: #555753; // font color … all colors have a corresponding number (see here for colors and #s)
background: #fff url(blossoms.jpg) no-repeat bottom right; // this is the background picture for the body, along with “fff”, which defines a color. It’s also saying to align the picture to the bottom right, and don’t repeat it all over the page
margin: 0px; // this defines the margin of the text
}

So as you can see, this is relatively simple stuff. It’s basically like formatting a MS Word .doc file, but using words instead. The key is to learn how to define things in CSS. Here are some good CSS resources:

1. CSS validator
2. W3 CSS page

And the best one that I’ve found:

3. W3 school CSS page

You can learn about the different things that you can do with CSS in those pages and play around with the Zen Garden CSS file/index.html file. Basically, you’re skinning a website. It’s object-oriented web-design at its best in my opinion.

PS – Please don’t ask me to help you with this stuff, I’ve given you all of the resources that I used to learn basic CSS. I really don’t know anything beyond what’s in the links in this post. So please take some time, read up and learn it.

PPS – I’m going to redesign thepokerdb as a CSS-based site. Then we’ll be able to have templates for the site, which the user can choose. So go practice your CSS skills so you’ll be able to contribute a sick template when we start accepting them.

Related posts:

1. return of the aim convo post
2. Fantasy Fanatics
3. Funny/cool t-shirts
4. Good idea of the day
5. Good idea of the day (again)