CSS Zen Garden
Favorite Zen Garden pages • Navigating Zen Garden site • The purpose of CSS Zen Garden
The Zen Garden CSS Designer Challenge • Working with a Web Designer • A marriage of opposites
CSS Resources • Cascading Style Sheets: Designing for the Web (3rd Edition) • Lynda.com CSS Tutorials
Cascading Style Sheets (CSS) — Web page design, the flexible way
HTML is the original language of web site design. It was designed primariliy to govern structural aspects of a document. Though HTML continues to provide the foundation for web pages, today it is only part of the formula of a well designed, flexible, up-to-date web pages. The other main ingredient is Cascading Style Sheets (CSS).
Find out why Cascading Style Sheets (CSS) are so important to modern web design.
For an vivid, in-depth peak at the power, flexibility and possibilities of CSS visit www.CSSZenGarden.com
CSS Zen Garden proves that designers can morph a single web page in hundreds of dramatic variations, just by applying CSS styling. The possibilities are sure to dazzle, especially if you comprehend the key concept. At CSS Zen GArden all the variations contain the exact same underlying HTML. Designers produced their presentation variations simply by adding or altering a few dozen lines of a CSS style sheet, and by using CSS to call in their own graphics ... all that, without editing a single line of HTML. The end result: one HTML web page, hundreds of presentations generated via CSS. Additionally it severs as an intended repository of examples that designers can study and expand upon.
If perplexed, read the following explanation of what you’ll experience at CSS Zen Garden.
Please note, if you get lost in CSS Zen Garden, particularly if you have trouble navigating through the site, use my list of favorite CSS Zen Garden designs.
The Value of CSS
So, what does CSS do for you?
If you're a web designer CS provides you a level of control over layout and presentation not previously available on the web. If used well, CSS also makes your work practices more efficient, by allowing you to redesign the look of a web page or an entire web site, just by editing a few elements in a CSS style sheet. You can even use CSS in the design of application user interface.
If you're a site owner, you'll want to work with a web designer who possesses a deep understanding of CSS. With sucha relationship you'll be able to achieve modern appearances and effects on your site. And when you want an entirely different look for your site, your designer should be able to provide options with a minimum of effort. In fact, a good designer should be able to offer mockups of dramatically different layouts and presentations, just by editing their well crafted CSS. This level of flexibility and control is good for both of you! Nothing demonstrates this fact better than CSS Zen Garden.
The purpose of CSS Zen Garden
In a nutshell, the purpose of the Dave Shea's CSS Zen Garden web site is:
- to dramatically illustrate “proof of concept” for the new wave in web design, the now well-accepted CSS standard
- to display the astonishing possibilities, flexibility, and promise of CSS
- to offer designers an opportunity to display their CSS and design talents
- to propagate the understanding and use of CSS through sharing of knowledge and example.
- to educate designers and clients by providing a gallery of free “how to” examples
- to provide students and beginning designers a change to study the work of advanced designers
The CSS Zen Garden Challenge
The CSS Zen Garden site successfully engaged participant designers to volunteer their expertise by contribute designs for the site. The result is a symposium of creativity and possibility.
Feel free to jump right in and check out the links below, but here’s the crux of CSS Zen Garden challenge, and a description of how the site evolved from volunteer contributions.
Even if HTML is not your thing, go ahead and browse the Zen Garden site anyway, but be sure to understand that these wildly different pages are but simple adaptations of one, and only one, HTML page ... and remember that all redesigns were accomplished without editing any HTML.
Volunteer participants were given the task of redesigning CSS Zen Garden's own home page.
However they were presented two simple but striking restrictions:
- designers were restricted from editing the HTML (in other words, they weren't to change any of the content; navigation links all remain the same, none of the HTML tags (p, h1, h2, h3 .. li.) were to be altered.
- all results had to be achieved strictly by modifying or adding to the existing CSS style sheet. (the CSS style sheet is a teeny little document that controls the look and layout of any web page that references it.)
Many of the redesigns are quite impressive and include:
- unique and interesting menus
- links with rollover effects, remote text, or graphic substitutions
- scrolling transparencies
- stationary backgrounds behind cool scrolling effects.
Nevertheless, the main difference between the pages is simply is the CSS style sheet and the choice of graphics. Some designs look rather uninteresting, but often have subtle features worth noting.
The charter goal of the www.CSSZenGarden.com is intended to educate, so all participants are required to post their style sheets so others could learn from their example. Though the style sheets themselves are succinct and straight forward, some expertise is required to design a style sheet and ensure that they render properly on "all" browsers.
Many of the redesigns are quite impressive, including unique menus and links, graphic substitutions, transparency, stationary backgrounds behind cool scrolling effects, etc. Though some designs are rather uninteresting, they may include subtle features like rollovers, or transparency. So peak around at those.
Anyone can submit a redesign to CSS Zen garden, so the site grows weekly. The reward to contributors? Their design appears on a site with pages created by other experts, and their design always included a link to their web site, so it’s got to generate referrals and contacts.
Navigating through CSS Zen Garden
Navigating the Zen Garden site can be confusing at first. Here’s why.
Although each page contains the exact same text, links, and underlying HTLM, the attached CSS changes the pages's appearance dramatically by changing background colors, by adding new graphics and background images, by freely repositioning any of the div tags for headers, footers, main body ... even by changing the location and appearance of navigational links that lead to other pages! That’s the whole purpose ... to dramatically rerender existing HTML via CSS.
You’ll see an emerging pattern, but bear in mind, some pages are so different, you may be fooled into thinking you're viewing a different page. Granted the graphics are unique, but all displayed text and links are the same.
The homepage is: http://www.csszengarden.com
Favorite pages at CSS Zen Garden
Here are links to some of my favorite redesigns at the Zen Garden site.
First, at the top of the list there are three links that provide a bit of insight. They show you:
- the original design from the CSS Zen Garden home page, rendered with CSS by the site's creator.
- a look at the bare HTML, rendered without any CSS. This looks just an average, ugly web page from the old days—the mid 90's!—because all the rendering occurs based on your browser's default settings.
- the HTML code itself, unrendered in any way. This is like looking at a 'code view' window is a web development tool, such as DreamWeaver.
Zen Garden has over 200 entries. If you're intrigued and want to see more,
be sure to look at "View All Designs" at: http://www.mezzoblue.com/zengarden/alldesigns/Working with a Web Designer
Before you work with a web site designer, ask if he or she can redesign the home page CSS Zen Garden strictly with CSS! If not, that’s a sure sign the designer is far behind the curve, and still designing the old fashioned way. This could easily lead to a number of unpleasant HTML dead ends, or time consuming rewrites ... and you probably won’t know it until it’s too late. Though many designers dabble with CSS, they may fail to leverage its true power to your advantage.
Due to the flexibility afforded by CSS, it's not unreasonable to ask your designer to create two or three CSS style sheets and apply them to your site, just as a logo/business card designer might show you a number a mockups. This level of freedom and flexibility is not attainable with traditional HTML-only approach. If the designers produces a style sheet that's close to the look you want, refining should be a relatively simple task. That's the beauty of CSS.
When a site is designed using pure HTML, or if CSS is improperly blended in, making simple site-wide changes can plunge a designer into mind numbing tedium, which inevitably distracts them from their expertise and purpose: design, usability and the production of a site that suits your needs.
You want someone who uses CSS properly and to your advantage. When they do, they can spend more time working with you on presentation. Don't work with a web designer who hasn’t read this book, or who doesn’t understand CSS and CSS Zen Garden.
CSS for Print
We've all seen the term 'printer friendly web page' and most of us have printed web pages with less than desirable results. Printer friendly pages try to prevent such paper wasting endeavors. But why are 'printer friendly pages' necessary? The reason is this.
Most modern monitors provide a 'landscape' view of the Internet, thus designers create pages that fit this format. But printing in the US is largely a 8.5 x 11 'portrait' affair ... attempting to print landscape into portrait is like trying to fit Ben Ben into the ground level of a parking garage.
When you click a printer friendly link, some switch takes place. It possible that a similar HTML page loads, with the same visual text, but with layout and font size suitable for print. This transformation may take place via a script, a hand coded HTML page ... or by a CSS 'print' media style. CSS allows for a variety of media specific styles, and 'print' is simply one of those options.
Here's one way to add the 'media' attribute to the LINK element:
<LINK rel="stylesheet" type"text/css"
href="print.css" media="print">In this case the styles in "print.css" render only when the broswer prints the web page. It has no effect on the broswer display; that is governed by the default 'screen' style sheets, which are intended for computer screens.
Best of all, with a CSS declaratiosn like the following, you can eliminate elements that the user probably doesn't want to print:
DIV.advertisement {display: none;}
DIV.navigation {display: none;}
Say the user has found a recipe of interest on a web page. Your logo and masthead in a DIV. at the top of the page is Below is a DIV with navigation links. To the side of the recipe are a column of advertisements. The above declarations remove the advertisements and navigation from the printed page, so the user gets an attractive printout with your masthead and the recipe ...and any other sections you want to include. Slick. And you didn't have to alter ANY HTML, except to add :
<LINK rel="stylesheet" type"text/css"
href="print.css" media="print">CSS also has styles for handheld, projection, tty, tv, braille, and aural.
CSS and dynamic application skins / Adobe Style Explorer for Flex
It's possible to design multiple 'skins' for web applications with CSS. By changing a few lines in a style sheet CSS can change the look and color of all windows, the appearance of buttons or scroll bars (and obviously the text color of fields and the normal attributes we expect from CSS). Skinning works great in Adobe Flex which relies largely on MXML.
There's a Flex style explorer/editor here. It provides a great way to get visualize skin themes, and you can see the CSS change as you visually modify the various aspects of the interface elements. Also, you can copy the generated CSS and use it in your Flex projects:
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#
Today everything is about CSS, XML and PHP. CSS has found its way into lots of XML based systems.
HTML & CSS: A marriage of opposites
At this point CSS probably sounds great, right? Yes, it can do amazing things, often with the greatest of ease! But bear in mind, HTML and CSS are a marriage of near opposites. Sometimes reconciliation is challenging. Formal agreements and good communication skills are necessary ... and for certain ventures, successful cooperation requires great forethought and planning.
Here's a personality overview of the two partners.
HTML is all about structure and flow. It's flexible to a fault, like water, wanting to fill the lowest available space. You can't stop it, that's its nature.
It's appearance is governed by default browser setting, or settings that you specify in your browser preferences. In other words, a web page may display somewhat differently from one browser to the next, depending on the settings ... and the result may be significantly different! Imprecision and unpredictability are hardly a designer's dream. It's like going back 20 years in desktop publishing.
The reasons for this wily ways of HTML lay in the original intent:
- to make a linkable documents (hypertext)
- to retain structural integrity, such as headings, paragraphs, numbered lists ... and to do the best possible job in a world of unknowns!
- to display structure intelligently without prior knowledge about the viewer's system or settings. In other words, to present readable documents without knowing what fonts are on your system, without knowing the size of your monitor, without know the size of the browser window, which the user can change at any time, and without knowing specifics like the width of a column.
HTML takes a lumbering "anything goes" approach: I don't care too much about how it looks, as long as there's a meaningful presentation of structure, where paragraphs look like paragraphs and headers stand out big and bold.
HTML is about flow, flexibility and structure. In contrast CSS, is about design, presentation, specificity and positioning.
CSS is behaves more like a control-freak. For better or worse, it tries to set everything is a specific way. The results are reasonably reliable from one browser to the next, but nothing is pixel perfect across all browsers ... particularly sectional positioning.
CSS takes control and imposes the designer's intent to a satisfying degree, by overriding the browser default settings. Browser default settings are one thing, and easily surmountable. A much bigger concern are the user settings, to which CSS defers.
Browser defaults and browser settings
A browser can easily override the effect of certain CSS properties. CSS's nemesis is user settings. (Say that five times fast!) The real problem is user-made browser settings, because they have clout over CSS.
Something similar can occur on the fly. For instance, for legibility, the user may choose to enlarge the basic font size (using Command + on the Mac and Option + on Windows). This may cause headers and various text elements to wrap in an ungainly fashion.
Cascade
Browser and user settings aside, precision and structural positioning can easily appear to degrade due to CSS's own 'cascade rules' and the way in which they inherit from each other. It's kind of like this: If Bill can't make the party we're switching from semi-formal dress to casual. If it's causal dress we're having burgers not Peking Duck. And so it goes. At times it's a cascade of surprise.
Degradation
When things go wrong with CSS, the result is called degradation. There are many causes of degradation: a browser that ignores CSS, a missing CSS file ...
If the underlying HTML was well constructed, even a fully degraded rendering will provide a legible and navigable web page.
However some lazy or ignorant designers ignore the prudent use of basic HTML elements, such as body, paragraph, headings and lists. Some designers do this, and get away with it ... at least temporarily. They do so by over using CSS classes; for instance, applying those classes to an HTML page which contains nothing but body and paragraphs. If serious degradation occurs, the result is an entirely unstructured web page — just a stream of paragraphs — because no HTML structure ever existed.
Always incorporate HTML structuring as completely as you can. Then when degradation occurs, the web page will still make sense.
The wide world of degradation brought to you by Microsoft Internet Explorer
Though CSS usually pulls HTML around by the nose, CSS is largely beholden to the browser's interpretation of things ... this is particularly true of dumb browsers like Internet Explorer 5.
Internet Explorer 5's unmerited popularity and legacy issues have single handedly stymied designers by preventing them from freely adopting new standards. When designers can fully embrace CSS proceed safely, without warily including lots of hacks, but only after they can safely conclude that only very small percent of people use IE5.
Everything in moderation — Using the correct amount of CSS
The secret design flexible web design lies in the appropriate separation of structure and presentation, by weaving HTML and CSS together in the proper balance. HTML focuses on structural element like paragraphs, heading, lists, etc., which is exactly HTML's original purpose. CSS does not replace HTML. It works with it, and relieves HTML from the burden of presentation, a task for which is was not well designed. CSS allow you to make global changes in the appearance of HTML elements. For instance, after you've define how all h2 headers should look, you can redefine them all for a single web page, a number of web pages, or across and entire site, just by editing a few lines in the CSS style sheet.
Though CSS provides the foundation for flexible presentation, too much CSS can complicate things and ultimately limit logic and flexibility. Over use of class selectors is a case in point. Your success hinges on using the most appropriate tool for the job, and balancing HTML and CSS intelligently.
Naturally the notion of a 'correct balance' is up for debate. Meanwhile, thanks to CSS, style and presentation have made a huge, flexible leap forward. Everyday styling is easily controlled, however, when you push the limits, results may be unpredictable, depending on the browser. Additionally there may be pros and cons to the approach you take, and as with most design patterns it is possible to complicate matters by choosing an inappropriate model. I think you'll find that some of the CSS at Zen Garden is pretty hard to understand, perhaps because it was designed hastily for an immediate effect, without concern for legibility for future developers.
The Best Books on CSS
If this article got you interested in CSS, I recommend the following book for an in depth look at CSS (and by the way, it's a decent fast paced pimer on HTML, but you're better off if you already have a general grasp of HTML before cozying up with this read:
Cascading Style Sheets: Designing for the Web (3rd Edition)
by Hakon Wium Lie and Bert Bos
I think this book particularly well written, partly because the authors are so well acquainted with the topic, because, well ... they wrote the spec! It's easy to assume, a book written by the geeks who created the system, would necessarily be overly technical, unreadable and devoid of practical application. Not so! The text is clear and complete, so you get quality documentation straight from the source. There are many, many resources on the web, but none at thorough as this book. I look elsewhere, and find some good stuff, but I keepcoming back to this book with my highlighter pen.
Online CSS resources
W3C / http://www.w3.org
A great place to start. Get your info from the horse's mouth:
MezzoBlue (and links from MezzoBlue):
Lynda.com — Video tutorials
Dreamweaver CS4: Essential Training (with James Williamson)
Check out James Williamson's excellent Dreamweaver CS4: Essential Training tutorial on Lynda.com. You'll be glad you did, even if you've already started down your path with CSS. It's a quick paced introduction that explains how Adobe Dreamweaver integrates CSS.
The principle's in this tutorial apply to any implementation of CSS ... and though Williamson's tutorial is a demonstration of Dreamweaver CS4, I was able to follow in almost in complete parallel in CS3.
Williamson has very coherent chapters on:
CSS Foundations (Chapter 6)
Controlling Typography (Chapter 7)
Controlling Layout with CSS (Chapter 10)Joomla! Advanced CSS (with: Jen Kramer McKibben)
Here's another very smooth, impressive title on CSS on Lynda.com.
Jen Kramer McKibben is pretty fast footed here with CSS and Joomla! She deomonstrates how to use CSS to alter the look of a basic Joomla templates, and she does so directly using (and demonstrating) Firefox's CSS toolbar (a Firefox developer tool written by Chris Pederick.
Here's the page for McKibben's 'Joomla! Advanced CSS' video tutorial:
More info and free download of Firefox's CSS toolbar?
There are other presentions on Lynda.com that on CSS, and perhaps more in depth, but none that cover the topic as clearly. Here's a list though:
Zen Garden Resource Guide for advanced features
Behind the scenes with a Zen Garden Designers
Douglas Bowman
Bobby van der Sluis
http://www.bobbyvandersluis.com/articles/garden_party/index.html
An online CSS list and rollover cookbook
Mac Consulting:
Macintosh Consulting, tutoring, and web design