nateomedia logo



Update: In honor of the 10th anniversary of the CSS Zen Garden, David Shea has updated the site’s code to HTML5 and reopened the design contest. The new code can be found here.

I teach Internet Design in the Visual Communications department at LCAD and one of the core objectives of the class is to ensure that each student is fluent in HTML and CSS by the semester’s end. For students that have no background (or particular interest) in programming, it’s very challenging to bring them up to speed in such a short period of time.

After a few weeks of exercises and demos, I introduce the class to David Shea’s CSS Zen Garden. The CSS Zen Garden is a highly effective way to introduce a group of design students to the power and purpose of external stylesheets and it also makes an excellent first project.

When they first start working with HTML and CSS, students often give into the temptation to rearrange the content of an HTML page (and ignore semantics) when they can’t figure out how to achieve their design goals through CSS alone. By making students work with the CSS Zen Garden HTML code (and by not allowing them to alter it), students are forced to seek out solutions to their design problems using only CSS. It’s great way to teach the proper implementation of web standards.

Unfortunately, as it is now coded, the CSS Zen Garden is rapidly reaching the end of its usefulness. Many of my current students will graduate from college in 2015. If I am to properly prepare them for the job market, they will need to understand HTML5. While it made sense last year to teach to XHTML while HTML5 matured and browser support increased, I no longer see either as a roadblock. HTML5 offers a lot of advantages over XHTML and I’m very happy to transition the course curriculum to the new standard.

While the markup may be different, I still believe that the CSS Zen Garden can be an excellent teaching tool. However, having already introduced my students to the semantically rich new markup options now available in HTML5, I can’t see using the CSS Zen Garden as it is now written as a class project. Certainly, I could always make a new page for them to work from but, I don’t know, I kind of like the idea that the CSS Zen Garden might live on.

So I sat down and took a stab at it myself. My version strips out a few of those extra tags that David Shea included: the extra span tags that were once necessary to perform an image replacement, the unordered lists for navigation, and the empty divs that had no semantic purpose whatsoever. The acronym tag is now the abbr tag. Access keys that did not fit the UK government recommendation were jettisoned. The navigation has been moved to the top of the file, now directly below the header. And the <head> is greatly simplified. <header>, <article>, <section> and <footer> have replaced the <div> tags that once served a similar purpose.

All of the original links and text have been unchanged — even the more dubious meta tags — it is my intent to leave David Shea’s work in as close to its original state as possible. I still remember how excited I was the first time I stumbled onto the CSS Zen Garden and I’m just hoping that, for at least a few more years, young designers might continue to take up the challenge of redesigning the CSS Zen Garden using nothing more than a stylesheet.

Download CSS Zen Garden HTML5 >
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="author" content="Dave Shea" />
	<meta name="keywords" content="design, css, cascading, style, sheets, html5, graphic design, w3c, web standards, visual, display" />
	<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design." />
	<meta name="robots" content="all" />
	<title>css Zen Garden: The Beauty in CSS Design</title>
	<link rel="stylesheet" href="style.css">
</head>

<!--

This html5 document is marked up to provide the designer with the maximum possible flexibility.
There are more classes and extraneous tags than needed, and in a real world situation, it's more
likely that it would be much leaner.
	
However, I think we can all agree that even given that, we're still better off than if this had been
built with tables.

-->

<body id="css-zen-garden">

	<div id="container">
		<header role="banner" id="pageHeader">
			<h1>css Zen Garden</h1>
			<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
		</header>
			
	<nav role="navigation" id="linkList">
		<section id="lselect">
			<h3 class="select">Select a Design:</h3>
			<a href="?cssfile=/213/213.css&page=0">Under the Sea!</a> by <a href="http://www.ericstoltz.com/" class="c">Eric Stoltz</a>
			<a href="?cssfile=/212/212.css&page=0">Make ’em Proud</a> by <a href="http://skybased.com/" class="c">Michael McAghon and Scotty Reifsnyder</a>
			<a href="?cssfile=/211/211.css&page=0">Orchid Beauty</a> by <a href="http://www.kevinaddison.com/" class="c">Kevin Addison</a>
			<a href="?cssfile=/210/210.css&page=0">Oceanscape</a> by <a href="http://www.pixel-house.com.au/" class="c">Justin Gray</a>
			<a href="?cssfile=/209/209.css&page=0">CSS Co., Ltd.</a> by <a href="http://www.benklemm.de/" class="c">Benjamin Klemm</a>
			<a href="?cssfile=/208/208.css&page=0">Sakura</a> by <a href="http://www.re-bloom.com/" class="c">Tatsuya Uchida</a>
			<a href="?cssfile=/207/207.css&page=0">Kyoto Forest</a> by <a href="http://rpmdesignfactory.com/" class="c">John Politowski</a>
			<a href="?cssfile=/206/206.css&page=0">A Walk in the Garden</a> by <a href="http://users.skynet.be/bk316398/temp.html" class="c">Simon Van Hauwermeiren</a>
		</section>
			
		<section id="larchives">
			<h3 class="archives">Archives:</h3>
			<a href="/?cssfile=/001/001.css&page=1" title="View next set of designs.">next designs »</a>
			<a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: 3" accesskey="3">View All Designs</a>
		</section>
			
		<section id="lresources">
			<h3 class="resources">Resources:</h3>
			<a href="/001/001.css" title="View the source CSS file for the currently-viewed design">View This Design’s <abbr title="Cascading Style Sheets">CSS</abbr></a>
			<a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS." ><abbr title="Cascading Style Sheets">CSS</abbr> Resources</a>
			<a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: 5" accesskey="5"><abbr title="Frequently Asked Questions">FAQ</abbr></a>
			<a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file.">Submit a Design</a>
			<a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page.">Translations</a>
		</section>
	</nav>
		
<article role="main">
<section id="quickSummary">
<p class="p1">A demonstration of what can be accomplished visually through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.</p>
<p class="p2">Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a></p>
</section>

<section id="preamble">
<h3>The Road to Enlightenment</h3>
<p class="p1">Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, and broken <abbr title="Cascading Style Sheets">CSS</abbr> support.</p>
<p class="p2">Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr> and the major browser creators.</p>
<p class="p3">The css Zen Garden 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.</p>
</section>

<section id="explanation">
<h3>So What is This About?</h3>
<p class="p1">There is clearly a need for <abbr title="Cascading Style Sheets">CSS</abbr> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing 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.</p>
<p class="p2"><abbr title="Cascading Style Sheets">CSS</abbr> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.</p>
</section>

<section id="participation">
<h3>Participation</h3>
<p class="p1">Graphic artists only please. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide</a> for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
<p class="p2">You may modify the style sheet in any way you wish, but not the <abbr title="HyperText Markup Language">HTML</abbr>. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<p class="p3">Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a> to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your .css file to a web server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.</p>
</section>

<section id="benefits">
<h3>Benefits</h3>
<p class="p1">Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <abbr title="Cascading Style Sheets">CSS</abbr>-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.</p>
</section>

<section id="requirements">
<h3>Requirements</h3>
<p class="p1">We would like to see as much <abbr title="Cascading Style Sheets, version 1">CSS1</abbr> as possible. <abbr title="Cascading Style Sheets, version 2">CSS2</abbr> should be limited to widely-supported elements only. The css Zen Garden is about functional, practical <abbr title="Cascading Style Sheets">CSS</abbr> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <abbr title="Cascading Style Sheets">CSS</abbr> validates.</p>
<p class="p2">Unfortunately, designing this way highlights the flaws in the various implementations of <abbr title="Cascading Style Sheets">CSS</abbr>. Different browsers display differently, even completely valid <abbr title="Cascading Style Sheets">CSS</abbr> at times, and this becomes maddening when a fix for one leads to breakage in another. View the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources">Resources</a> page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’t accept it.</p>
<p class="p3">We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.</p>
<p class="p4">This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see <a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but we ask you release your <abbr title="Cascading Style Sheets">CSS</abbr> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="View the Zen Garden's license information.">one on this site</a> so that others may learn from your work.</p>
<p class="p5">Bandwidth graciously donated by <a href="http://www.mediatemple.net/">mediatemple</a>. Now available: <a href="http://www.amazon.com/exec/obidos/ASIN/0321303474/mezzoblue-20/">Zen Garden, the book</a>. </p>
</section>
</article>

<footer role="contentinfo">
<small>
<a href="http://validator.w3.org/check/referer" title="Check the validity of this site’s HTML">html5</a>   
<a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site’s CSS">css</a>   
<a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="View details of the license of this site, courtesy of Creative Commons.">cc</a>  
<a href="http://mezzoblue.com/zengarden/faq/#s508" title="Read about the accessibility of this site, AccessKey: 0" accesskey="0">accessibility</a>  
</small>
</footer>

</div>
</body>
</html>
email