A demonstration of what can be accomplished visually 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, table-based layouts, broken CSS support, and microsoft's internet explorer (versions prior to 8).

Today, we must clear the mind of past practices. 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 (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.

So What is This About?

There is clearly a need for CSS 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 one will load the style sheet into this very page. The code 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.

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 Beginning CSS Web Development,   by Simon Collison 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/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 college).

Unfortunately, designing this way highlights the flaws in the various implementations of CSS. Different browsers display differently, even completely valid CSS at times, and this becomes maddening when a fix for one leads to breakage in another. Full browser compliance is still sometimes a pipe dream, and I do not expect you to come up with pixel-perfect code across every platform. So do your development in any modern browser and if possible also test in some version of ie prior to 8.

Bandwidth graciously donated by Mercyhurst College in Erie, PA