How to Submit a Design to CSS Zen Garden

To submit a design, download the sample HTML and CSS files, build your design by editing only the CSS (the HTML must stay unchanged), upload the CSS file and all associated assets to a web server you control, then send the site a link to an archive of those files. If the design is chosen, they download it and place it on their server. The site asks that you not submit half-finished work.

What CSS Zen Garden Is and Why the Rules Exist

CSS Zen Garden is a demonstration of what can be accomplished visually through CSS-based design. Its central mechanic is simple: the HTML of the page never changes, and the only thing that changes is the external CSS file. Selecting any style sheet from the list loads it into the same page.

That constraint is the whole point. Because every design shares one HTML document, the gallery proves that CSS alone can control the style of a hypertext document. Your submission is judged as a visual design built on top of fixed structure.

Prerequisites

• Strong visual design skills are the stated focus of the project.
• Working CSS skills are necessary because you are modifying the page. The example files are commented well enough that CSS novices can use them as starting points, and the site points to a CSS Resource Guide for advanced tutorials and tips.
• Your own web server to host the files you submit.
• A local copy of the sample files to work on.

Step-by-Step Submission Process

1. Download the sample files

Download the example HTML file and CSS file from the site. These are your starting point and your reference for how the page is structured.

2. Work on a copy locally

Set up the sample HTML and CSS on your own machine and iterate there. Keep the HTML file exactly as provided.

3. Modify only the stylesheet

You may modify the style sheet in any way you wish, but not the HTML. This may feel daunting if you have never worked this way before; the site's advice is to follow the listed links to learn more and use the sample files as a guide.

4. Finish the design before submitting

The site explicitly asks that you not submit half-finished work. Treat the piece as complete before moving to hosting.

5. Upload to a web server you control

Upload your CSS file to a web server under your control, together with all associated assets (images, fonts, and anything else the stylesheet references).

6. Send a link to an archive

Send the site a link to an archive of that file and all associated assets. The archive link is what gets reviewed.

7. Wait for review and possible hosting

If the design is chosen, the site downloads it and places it on their server. Participation brings recognition, inspiration, and a shared resource, in the site's framing.

Quick Reference

Common Sticking Points

• Editing the HTML. Any change to the markup breaks the premise of the gallery. If a layout idea seems to require new elements, solve it within the existing structure instead.
• Forgetting associated assets. The archive must include everything the CSS depends on, not just the stylesheet. A stylesheet that references images left on your machine will not survive the move.
• Sending files instead of a link. The instructions ask for a link to an archive, so make sure the archive is reachable before you send it.
• Submitting early. The explicit request is to finish the masterpiece first.

Is Submitting Worth It?

If your goal is recognition for CSS-only design work and you are comfortable with the fixed-HTML constraint, the process is short: build locally, host the files, send one archive link. If you want to change markup or ship a partial concept, this is not the right venue — the gallery's value comes precisely from every entry sharing the same HTML.