DM 171: css Zen garden Strategies

<< Previous | Next >>

Here are some thoughts and ideas that may help.


An entry to css Zen Garden is an exercise in graphics/design as well as cascading style sheets and HTML layout. Since the “verbage” is already set, what do you wish to convey visually? What ideas do you wish to try out with your design? This exercise is a great place for experimentation since you are not doing an entire site, just one page. Is my idea feasible? This is where you may have to compromise; if you had months to play, you could try nearly unlimited ideas, this assignment is due next week…

Scrutinize the HTML

Since you are prohibited from changing the css Zen Garden HTML file; it is a good idea to carefully examine the file to see the options that the code gives you for your styling.

  • Notice the comments throughout the code, Dave Shea (the author) labels areas of concern, explains/rationalizes certain areas of the code, gives suggests, and generally has wry comments. Worthwhile reading.

  • Line #17 is clear, you will need to name your css file “sample.css” since the rules do not allow changing the HTML file. It is a good idea to put the css Zen Garden file in its own sub-folder along with your sample.css file to keep thing tidy.

  • Take Dave’s suggestion:
    “This xhtml 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.”
    Depending on your design, there is no need to style every element.

  • Note that you are provided with an overall wrapper container with the id of container; you will be able to position all of your content with it.

  • Not wrapped by the container div and below it in the code are six extra divs provided just in case you need them for positioning background graphics. They only contain span tags and will not be visible on the page unless you decide to utilize them.

  • Inside the container div, note that all of the content has been placed in child divs and descendent divs, each with a descriptive ids ( intro, supporting text, linklist are children; pageHeader, preamble, participation, and so on are grandchildren). This allows you to effect them together or individually depending on your design.

  • The grandchildren divs also have each contained paragraph labeled with a class attribute sequentially (class="p1", class="p2", class="p3", and so on). This allow pinpoint styling of individual paragraphs within the document! Once again, you may not need this much control depending on your design.

  • Every heading tag has span tags that surround the text of the heading. This allows the usage of an image replacement for the text. Since the span tags surround the heading text, you will not be able to use some of the techniques such as the Gilder/Levin Method or Levin techniques which require the span tags sit empty along side the heading text:
    <h3><span></span>Heading Text</h3>

  • The links in linkList are contained in unordered lists, this allows you to use some techniques from Listamatic to display them horizontally as well as vertically and give them rollover effects.

  • You will probably notice more as you scrutinize longer…

View the CSS Sample

The sample CSS file for css Zen Garden is the file for the front page of the site. As Dave Shea says in the comments, “You may use this file as a foundation for any new work, but you may find it easier to start from scratch.” Even if you do not use his file, you can get ideas from the way he pinpoints with his selectors.

You can also see that his style sheet starts out with simple selectors and moves to more complex as he narrows styles. You may find that such a logical layout of your styles can prevent rule conflicts.

Opening Gambits

This is where you make your basic decisions.

Absolute, relative, or a combination of positioning? Is your design fixed width or “liquid?”

Your background color/pattern/texture also needs to be an early decision since your other graphics “lay” on top and need to blend in with them.

Do I need to use * {margin:0; padding:0;} in my stylesheet to get rid of browser default styles to make mine work?

While this is a styling exercise, also keep in mind good conventions with contrast and the like to keep your design hign on the usability scale.

Have Fun!

Let your imagination work for you.


<< Previous | Next >>