CSS Tutorial by Paul Bohman

• Introduction to CSS |
• Web Developer Toolbar

The Beauty of CSS

Cascading Style Sheets can be powerful design tools in the hands of gifted graphic artists. There are many beautiful CSS-based designs on the web these days. One of the best places to find a large collection of them is at http://www.csszengarden.com/. This site was created as a showcase for the power of CSS as a design tool. The idea behind the site is simple: create one HTML page and allow other people to create styles for it. The home page of the CSS Zen Garden looks like this:

When you turn off the CSS styles, you'll see the underlying HTML structure in the document. To turn off CSS styles using the Web Developer Toolbar in Firefox, use the keyboard shortcut Shift+Ctrl+S or use the menu system: CSS > Disable Styles > All Styles, as mentioned previously. You can also use the Opera browser (www.opera.com), which allows you to turn off styles quickly by clicking on the "User Mode" icon. Or you can use the link provided in the text on the web page itself. The paragraph right below the CSS Zen Garden site title, on the left of the screen near the lily pad, contains a link to view the sample HTML file. Without styles, the page looks like this:

You can toggle between the plain HTML and the styles view to see the dramatic effect that the styles have on this otherwise boring web page.

Many designers and artists have created their own graphics and styles for this web page. You can view their efforts by clicking on the links under the heading which says "Select a design." Here are a few of the many designs:

Believe it or not, all of these designs contain the exact same HTML. The styles have changed, but the HTML hasn't changed at all. If you don't believe me, look for the link that says "Download the sample HTML file and CSS file" and click on the HTML file. It may take you a moment to find that link, because it's likely in an entirely different place this time, due to the different styles that have been applied. If you compare the HTML file here to the one on the previous page you'll find that it's exactly the same.

Keep going through the list of designs. Explore this site. Find designs you really like. Find designs you don't like. There is a wide enough variety here to keep you busy for hours.

Of course, in order to create sites of this caliber, you have to know a thing or two about graphic design. These people are artists. They're professionals. They know what they're doing, and they're showing off. If you have the artistic skills to do this, great! If you don't, that's ok too. At the very least I want you to get a feel for the potential of CSS.