The css Zen Garden web site was created to encourage the use of CSS in web development and design. It shows that, without modifying a page's HTML, many different designs can be used to display the exact same content. Each design css Zen Garden provides is a design implemented entirely by CSS. From the site:
There is clearly a need for CSS 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.
The following will cover the steps taken to make a design (named "Pinkle") for the css Zen Garden web page.
To design a Zen Garden page, you'll need to understand its content and how that content is defined in HTML. It is within that HTML structure that a design would need to be implemented. And that design should be suitable and work with the content. Remember, the HTML doesn't change, only the CSS used to implement the design.
If you look at the source code of the Zen Garden HTML page you can get a feel for what is going on. The area pertinent to the page itself is within the body tag. There you have main div tag labeled as "container". In that you have some additional divs outlining the content. It reveals the following basic structure:
Following that there are some additional tags that are not specific to layout but could be useful for designs that need them for additional elements.
Most of the div elements contain content that has one or more header tags (h1, h2, etc) and/or some paragraphs with text. Those tags also tend to have additional spans within them for additional options for text styling. These tags are not necessary for the HTML, however may pose benefitial for a design.
The linkList is a little different than the other sections. It contains a collection links divided into 3 sections. As with the span tags in the other sections, here an additional linkList2 element is provided for design flexibility. Within each linkList section is an unordered list (ul) of links.
For a more conceptual idea of just how all this plays out in the HTML, it can be helful to view the HTML with the important block elements outlined using a basic style sheet: Zen Garden Outlined.
Understanding the structure of the content will help you better understand the possibilities for layout and design. If you think about most designs, however, they work within a very basic layout, usually with body text flowing down the center of the page with a links list or navigation to either side or above that text. The design simply places imagery around that.
The design this tutorial covers is called "Pinkle," named so simply for its colors.
It was created in Fireworks. The source PNG can be found here: Pinkle Source PNG.
Within this design, you can see how different areas of content have been layed out and styled. The header contains an image of a bridge with the quickSummary directly below that in italicized text. Following the quickSummary are the remaining areas of text, each styled similarly with their paragraph text slightly indented from the heading. To the right is the linkList, and at the bottom of the page you have the footer centered. That is essentially it.
The only tricky part about this layout is the linkList. In the HTML, it is below all other content. It's the last div container followed only by the extra empty elements at the bottom of the document. In this position, it doesn't really play with any of the other content. The design has the list near the top of the page to the right of the Road to Enlightenment text. If you know your CSS, you'll see that this isn't a problem since CSS will give us control over element positioning. This allows us to take the link list from the bottom of the page and move it to where it needs to be,
Once the design and layout is nailed down, its time to start implementing it in the HTML through CSS. For Pinkle, and often for most other designs, it involves (but is not limited to) the following:
Usually the first things to do is add the images. This will immediately give you a visual reference to your design. The first place to start can be the header. The header is not a repeating background, just a single image, but it will still be added as a background through CSS.
pageHeader div tag in the Tag Selector#pageHeader. The header background has now been added to the pageHeader div in the design. The resulting CSS should be something along the lines of:
#pageHeader {
background-image: url(images/header.png);
background-repeat: no-repeat;
}
Looking at the updated HTML, you can see that the size of the pageHeader div does not match the size of the image used for the header (as a background). That can be corrected by resizing the div with the width and height properties in CSS to match that of the image.
The resulting source code is:
#pageHeader {
background-image: url(images/header.png);
background-repeat: no-repeat;
width: 590px;
height: 162px;
}
Completed Design: Pinkle.