CSS Zen Garden

The Beauty of CSS Design

A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.

Download the sample html file.

The Road to Enlightenment

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, table-based layouts, and and microsoft's internet explorer (versions prior to 9).

Today, we must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.

The CSS Learning Zone invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.

So What is This About?

There is a continuing need to show the power of CSS and to be taken seriously by all Internet Programmers. This site is a student version of the famous css Zen Garden, whose site targets graphic designers. This Learning Zone aims to excite, inspire, and encourage participation by students. To begin, view some of the existing student designs in the list. Clicking on any (Sample #) will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.

CSS allows complete and total control over the presentational aspects of a hypertext document. For you to truly appreciate the power at your control, it is important that you see what is possible when the CSS is the only part that you have control over. You can then contrast what others have done with the same structure/content. Note this exercise only illustrates a portion of the power that is available when using CSS across your site; we can always push it further.

Implementation

Internet Programming students only. You are modifying only the presentation of this page, so strong CSS skills are necessary. Please refer to our text book CSS3: The Missing Manual (3rd ED)   by David McFarland for a quick refresher on working with CSS.

You may edit your style sheet in any way you wish, but not the HTML. When your (external) .css is loaded, it will not be from your HTML file. To be clear, you do not have to write style rules for all of the structure/id's/classes/elements in the HTML file. The excessive amount of additional structure is there to provide as much flexibility as you may want in your design. This may seem daunting at first if you’ve never worked this way before, but will help to make you more aware of all the capabilities of CSS.

Download the sample html file to work on a copy locally. Once you have established a name for your CSS file, and its location in your account, send me and email with the full-path and name to your file. You do not have to be finished at this point, but do not change the name or move the file until after they are 'collected'. You are to have your completed masterpiece on gauss (our web server) before class on the due date.

Requirements

The only real requirements I have are that your CSS validates, and that you use absolute paths for any images that you use (I will not collect your images).

Of course all our previous discussions about the appropriate type of images, apply here as well (keeping in mind that we are a Catholic-based liberal arts university).

Luckily, designing this way shows how well various browsers have implemented CSS by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these days — especially when you factor in mobile — pixel-perfect layouts may not be possible across every platform. That’s okay, for our CSS Learning Zone your design should work in modern web browsers: Firefox, Chrome (same engine as Safari), and IE9+ (run by over 90% of the population).

This is a learning exercise as well as a demonstration, so please take advantage of this last class CSS assignment and learn all you can.

Bandwidth graciously donated by the Department of Mathematics and Computer Systems at Mercyhurst University in Erie, PA.