CSS Zen Garden

  Find out why CSS (Cascading Style Sheets)
is so important to modern web design.

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 

Introduction

Welcome to an introduction to Cascading Style Sheets (CSS). This article explains how CSS has changed the face of the Internet; how it revolutionized and simplified web design. It covers the way that CSS and HTML connect, and offers resources for further study.

When explaining the importance CSS to web site development one must talk about HTML, because the two work hand in hand. In this article we'll introduce a bits of information about HTML and CSS, side by side, progressing deeper as we go, leading up to the epiphany of CSS Zen Garden, which illustrates that, for a site that well implements CSS, a designer can dramatically overhaul it's appearance in a matter of minutes.

CSS successfully addresses one of HTML's basic issues. Many simple presentational goals have always been difficult or impossible to attain via pure HTML. Prior to CSS, altering or improving HTML's default presentation was a designer's nightmare. So designers often resorted to browser specific tricks and techniques. But then the page might render poorly when viewed with other browsers, and might leave it strewn with code that would surely perplex any developer inheriting the project.

Building an attractive web page with pure HTML was challenging enough. Modifying an existing presentation could amount a monumental task. This became glaringly apparent when the client simply requested a different font face and different font size for dozens of headers on dozens of pages. It was hours of careful, painstaking Find and Replace.

The purpose and value of CSS

Competent web designers use CSS for its effect and efficiency—these are core aspects of its purpose. When CSS and HTML are properly balanced a designer can make sweeping changes to the look of a web page, or overhaul an entire web site, with just a small bit of CSS magic, by editing a few properties in a CSS style sheet, with little or no change to the HTML.

If you're a site owner, you'll want to work with a web designer who possesses a deep understanding of CSS. When you decide to adopt an entirely different look your designer should be able to provide options with a minimum of effort. In fact, during the concept/design stage, 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 potential better than CSS Zen Garden.

HTML & CSS Overview

The key to CSS is understanding how it links to the elements on an HTML page via CSS selectors. So first we have to know more about HTML, and the elements it references.

HTML

HTML is the original language of web site design, and though HTML continues to provide the foundation for web pages today, single handedly it is neither well-suited nor efficient in handling display-specific details. For convincing opinion on this point, look no further than HTML5. In HTML5 many formatting features have been deprecated (dropped) to encourage (force) developers stop using HTML for styling presentation.

CSS on web pages

Well-designed, flexible, HTML web pages include CSS for styling presentation, in other words, for "grooming" raw HTLM. It allows web designers to achieve modern appearances and effects, and affords them a level of control over layout and presentation not available via pure HTML. Ungroomed HTML is drab, shaggy and unattractive and like a trip back to the late 1980s ... but it's unwaveringly loyal to it's true purpose of producing intelligibly displayed documents across a range of targets.

As mentioned, CSS allows designers to completely overhaul the appearance of a web page (or web site) without altering any HTML. CSS Zen Garden provided proof-of-concept. However, it's important to stress, a site must contain a carefully crafted blend of HTML and CSS in order to be flexible.

CSS in other avenues

As a testament to the usefulness of its concept, we see CSS used in other avenues, such as the design of rich internet applications (web or mobile apps), and in "skinning" those applications for an significantly different look.

Diving in

We have to know technical bits about HTML before we can understand how CSS links and interacts with it. But the basic concept is simple. CSS allows us to target particular elements of a page and define how they will look; is some cases it even allows us to determine where those elements will appear.The targeting mechanism is called a CSS selector.

Before introducing CSS selectors, and before we explore today's role of CSS and how it influences the appreance of HTML, let's a historical look at HTML and its charter purpose.

HTML's original purpose

The original goals of HTML were simple yet profound:

  1. to identify the structural aspects of a document via semantic markup
  2. to reliably and intelligibly flow text (and graphics) to unknown forms of media and circumstances (see item 2. below)
  3. to provide a mechanism for linking to other articles, or to other points in a given article (i.e. Hypertext).

There were three primary things that set HTML apart from text editors and word processors:

  1. HTML was an open standard from the start. Although word processors use one or more markup languages internally, usually it's a hidden, proprietary format—and usually a well guarded secret.
  2. an HTML document posted to the web is readable by anyone with online access, regardless of their computer, monitor, operating system, installed fonts, etc. No software is needed other than a basic up-to-date HTML browser. In contrast, a Microsoft Word document posted to the web is not readable or displayable by a browser; to read it you'd need to safe it to your computer and open it with Word or an application that can read Word's format.
  3. online documents could now link to other online pages or articles, or to specific places on the same page. Eventually word processing documents and PDF followed suit, but HTML paved the way for linking content in this manner.

This winning formula forged a fundamental leap in the information age and fueled the rapid growth of the world wide web. And the world was never the same.

HTML and tags in brief

The acronym HTML stands for HyperText Markup Language.

Hypertext is the linking mechanism in HTML that allows us to jump to other web pages or articles.

Though this markup language is somewhat vast, overall it's fairly simple. The bulk of the markup consists of HTML tags: angle brackets <> that surround a tag name. A tag or tag name is usually abbreviation of a type of semantic element in a page or document: a page, article, section, or a header, paragraph, list, image, and so on.

Opening and closing tags are placed around most type of elements.

Here are some HTML common opening tags:

<p>  identifies the beginning of a Paragraph

<h1>  identifies the beginning of the main Header of a page or section

<ul>  identifies the beginning of an Unordered List

<li>   Identifies a List Item, in other words, an element of a list, such as an unordered list.  (By default, each item in the unordered list is displayed with a preceding bullet point.)

A closing tag identifies the end of an element. A closing tag is the same as the opening tag, but with a slash before the tag name. For instance, </p> marks the end of a paragraph.

Here's an example of the HTML code for a paragraph:

<p>This is the content of the paragraph</p>

A browser will render this HTML to a page  like this:

This is the content of the paragraph

The tags (along with their enclosing angle brackets exist in the HTML. The tags identify various parts of the page content, such as paragraphs and headers. But these tags are are never displayed on the visible web page, because the browser recognizes them, interprets them, and knows to discard them from the visual display. The tags only exist in the HTML source code—i.e., inside the HTML language that browsers render into a presentable and readable page. 

It's worth mentioning that some elements are "self closing". For the sake of example, let's pretend there was a "$" tag for identifying prices. A regular "price" element for $24.95 would require opening and closing tags, like this:

<$> $24.95 </$>

However, if our fictitious "price" element were self-closing, it would look like this:

<$ $24.95 /$>

There are a few self-closing tags in HTML. The image tag is one of them, and we encounter it soon.

NOTE: Many tags have been deprecated, in other wordd they are no longer used or advised; though as a safety precaution some browsers continue to support them now and until some point in the future. For instance, because they presentational, and not related to structure the tags <center> <font><align> are now deprecated. That's right, they've been kicked out of HTML.

CSS Selectors

There are three basic types of CSS selectors: ID, class, and pseudo-class. There are many others too, but here we'll explored the tag selector. An HTML paragraph is marked with and opening paragraph tag <p> and a closing paragraph tag </p>. These surround the text of the paragraph. This tells the browser that the text within these tags should be displayed as a paragraph. The browser uses a decision-tree to determine how it should render the paragraph: it picks a font, a font size, line height, text color, top and bottom margins, and various other properties. It uses its default values -- or -- it defers to the user-style sheet, which is something you can define in your browser preferences. These are powerful settings that most people are unaware of; let's forget about them for the moment.

The browser will display the paragraph using its default settings unless it is instructed to apply CSS styles. These properties could be defined inline (generally that's a bad habit which flies in the face of certain CSS principles and best practices, and it requires no selector.)

The preferred methods of declaring styles are internal or external CSS style sheets. In each case we'll see declarations like the following:

p {
font-family: Verdana, sans-serif;
font-size: 12px;
line-height: 1.3em;
}

This is a CSS style declarations, with paragraph tag selector. The letter "p" is the selector. Remember the <p> paragraph tag? The "p" is the tag's name. If we want to target a paragraph to control it's style, we can do so by declaring a "p" tag selector.

After the p selector a pair of curly braces encloses a list of one or more properties—actually it's possible to have an empty list (with nothing between the braces.)

The example shown has three properties: font-family, font-size and line-height. Each property is followed by a colon and a value. This declaration profoundly affect any HTML page that references it. It tells the browser to display all paragraph tags with the Verdana font face, at 12 pixels and a line height of 1.3 ems:

And that's basically how it works. We can target and style various HTML tags: body, p, h1, h2, h3, etc. In our style declaration we can list and set values for a laundry list of properties. The other main type of selectors are class selectors, but I recommend you get familiar with tag selectors first. There's a tendency for CSS newbies and lightweights to overuse class selectors, and to largely ignore tag selectors. Don't fall into that habit, it allows you to use tags inappropriately, and it can make future changes more challenging to manage.

So let's say we have an HTML page with paragraphs. As long as the page contains or references the declarations (i.e.if it uses an internal or external style sheet) it will render paragraphs according to our specification. If we want to change the look of all paragraphs, we simple alter a property value in our existing p tag declaration, or we can add additional properties and values, or remove properties. The effects ripple page wide, unless we've set some constaint that limits them.

... to be continued.

HTML Tag attributes

We've learned a bit about HTML tags, but as you may have expected, HTML gets more complicated. There more to HTML than tags. We'll look briefly at attributes.

Some HTML tags may have one or more attributes. We won't got into detail here, and really you can skip this section, except for the next paragraph, as long as you understand that tag attributes are essential in connecting CSS to an HTML page. Originally they were used to attempt what CSS has managed, but now one of their main purposes is to link to CSS.

For the purposes of this article, the most significant attributes are the CSS attributes: ID, class and pseudo-class ... and the link tag, which allows us reference CSS stored in external files—CSS files that are separate from the HTML itself.

Here's a peek at tag a useful tag attribute within HTML itself, without any reference to CSS.

The image tag allows us to insert an image somewhere on a page. An image tag always contains a "source" attribute. As mentioned earlier an image tag is self-closing. So an empty image tag would look like this:

<img/>

... but that's pointless because it accomplishes precisely nothing, because the tag is completely empty. When the browser encounters this tag, it sees that it amounts to nothing, so it ignores it completely, and it has no effect on the display of the page.

An image tag needs a source attribute to serve the function of displaying an image. The source (scr) attribute is bolded below:

<img src="flowers.jpg"/>

As shown above, the source attribute declares itself with src=

Then, in quotes, it specifies the name and address of the image file itself. In this case "flowers.jpg" specifies the name of the jpg file (its address/location is understood to be the same folder that holds the HTLM file; a different URL address could specify a different location.)

The image tag may include optional height and/or width attributes that specify the dimensions of the image; if either of these differ from the actual size of the image, the browser will scale the image accordingly. If both are omitted, the image is display at it's normal size and scale.

Below is an example of an image tag with three attributes: source, width and height. Again, the attributes declare themselves by name directly before the equals sign. The value in quotes is the value assigned to the attribute:

<img src="flowers.jpg" width="247" height="131"/>

OK. That's more actually than you need to know about attributes for now. Just know that you can find them inside an HTML tag, and they offer some sort of functionality, like specifying the value of certain properties. They are important to us because they are the linking system between HTML and CSS. Now before we get into the nuts and bolts, here's a bit more on the purpose and need for CSS.

External style sheets

We link to external style sheet via HTML tag attributes. Specifically we add an href attribute inside a link tag, like this: <link href="../CSS/myStyleSheet.css" rel="stylesheet" type="text/css" />

To complete the circuit you indeed need to have a CSS file at the location specified by the href value. You can also declare the style sheet internally, but then other documents can't reference it.

CSS — Structure vs. Presentation: HTML vs. CSS

Key to the heart of CSS is the separation of an HTML document's structure and the presentation of that structure. HTML should define the structure. CSS should govern appearance. You'll hear this again and again when learning about CSS. And you'll hear the term "semantic markup" ad nauseam. Pay attention. These are critical concepts.

And now a cautionary note. Though the separation of structure and presentation are key to CSS and modern web design, a fully fundamental adherence to the notion of complete separation and utter polarization may leave you confused, instinctually skeptical, and perhaps paralyzed about what to do. As we'll see, sometimes the concepts structure and presentation cross boundaries. Ultimately, how could it be otherwise? Is as if we were saying that expression of an idea and the idea itself are essentially separate.

For now just play along. Pretend that structure and presentation are truly entirely separate worlds. You see that indeed, much of the time, the separation is simple and true. So for now, just pretend it's always true. You'll learn much that's significant from that perspective.

Structure

Think if HTML as the girders, I-beams, joists, sub-flooring, plumbing and electrical systems of a building—stuff that you'll never see when viewing the build from within or without ... unless you go into the non-public areas like the basement, attic, or crawl spaces.

Presentation

Think of CSS as the shingles, siding, carpet, paint, wall texture, window treatment, fixtures, and all the other visible surface materials. The stuff you see when inside the building, or when viewing it from outside.

Who's really in control of presentation?

Browsers have always been in charge of stylizing the presentation of HTML markup. Even today, beneath the hood, browsers still hold sway.

Our modern browsers certainly strive to render CSS faithfully, but it's always a game of catch up, chasing the newest standards and specifications, the latest proposals and reversals ... and dodging the bugs. And sometimes there's widespread confusion over what a new CSS specification means, or arguments that a new specification or proposal is nonsensical or non-implementable.

And from the browser vendor's perspective, updating browsers is a balancing act between prioritizing and addressing the most fundamental and pressing issues ... and including the new bling and pizzazz.

Standards spring up like gold rush boomtowns. Some turn into viable communities; others dry up, blow away and are forgotten. But over time we're better off than we were. Nevertheless for the life of me (forgive the side rant) and cannot understand why HTML has never supported a simple widely understood concept of tab stops and tab rulers!)

In the early days of the web, each browser rendered page elements as it deemed appropriate. It decided which font face to use, the line height, the font sizes for headings and paragraphs, paragraph margins, indentations, and so on. And since the browsers wielded the bulk of presentational control, results were unreliable, sometimes hideously wrong. Jump ahead to read more about why this was so.

Attempts at standardizing display were relatively successful. As a result most sites looked a lot alike. Though the predictability was somewhat consoling, we endured mundane and unattractive pages for an entire decade. But the results were both predictable AND unpredictable, as some browsers ignored or misinterpreted various stylistic matters. It was a giant boring mess, governed by a glacially slow open consortium committee process. And so something had to happen.

NOTE: You can see the default, bare-bone HTML styling by turning off CSS style sheets. Many browsers afford this option, and you can get browser plug-ins (like Firebug) that will do the trick. Disabling style sheets is a quick, easy, visual way to test to see if a page has a good HTML structure. If the page still makes sense, if headers look like headers, you can comfortably read through, that's an indication of good HTML.

CSS Zen Garden

Now it's time to take a look at what one can accomplish with CSS. The rest is mostly show and tell, and an in depth introduction to the www.CSSZenGarden.com. There are many resources for learning CSS, but I found the authors' own book most useful.

For a 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 purpose of CSS Zen Garden

In a nutshell, the purpose of the Dave Shea's CSS Zen Garden web site is:

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:   http://www.csszengarden.com/  
  The bare HTML sans CSS:   http://www.csszengarden.com/?cssfile=none  
  The HTML code:    http://www.theoreticallycorrect.com/cssZenGarden/HTML.html  
  Contemporary nouveau   http://www.csszengarden.com/?cssfile=/135/135.css  
  Bonsai sky   http://www.csszengarden.com/?cssfile=/069/069.css  
Attitude   http://www.csszengarden.com/?cssfile=/147/147.css  
  TechnOhm   http://www.csszengarden.com/?cssfile=/012/012.css  
  Wrapped in Burlap   http://www.csszengarden.com/?cssfile=/018/018.css  
  Urban   http://www.csszengarden.com/?cssfile=/146/146.css  
  Mozart   http://www.csszengarden.com/?cssfile=/189/189.css  
  Radio Zen   http://www.csszengarden.com/?cssfile=/058/058.css  
  Subway Dream   http://www.csszengarden.com/?cssfile=/152/152.css  
  Neat & tidy   http://www.csszengarden.com/?cssfile=/139/139.css  
  Pixelisation   http://www.csszengarden.com/?cssfile=/143/143.css  
  Cube garden   http://www.csszengarden.com/?cssfile=/138/138.css  
  Contemp   http://www.csszengarden.com/?cssfile=/135/135.css  
   C-note   http://www.csszengarden.com/?cssfile=/126/126.css  
  Tea-time   http://www.csszengarden.com/?cssfile=/124/124.css  
   Invitation   http://www.csszengarden.com/?cssfile=/104/104.css  
  Odyssey   http://www.csszengarden.com/?cssfile=/103/103.css  
  Japanese Garden   http://www.csszengarden.com/?cssfile=/096/096.css  
  port of call   http://www.csszengarden.com/?cssfile=/092/092.css  
  Open Window   http://www.csszengarden.com/?cssfile=/090/090.css  
  Muto merde   http://www.csszengarden.com/?cssfile=/078/078.css  
  Lost Highway   http://www.csszengarden.com/?cssfile=/075/075.css  
  Corporate ZenWorks   http://www.csszengarden.com/?cssfile=/095/095.css  
  WebZine   http://www.csszengarden.com/?cssfile=/091/091.css  
  Egyptian dawn   http://www.csszengarden.com/?cssfile=/074/074.css  
  Focus and shoot   http://www.csszengarden.com/?cssfile=/066/066.css  
  HoriZental   http://www.csszengarden.com/?cssfile=/048/048.css  
  Door   http://www.csszengarden.com/?cssfile=/041/041.css  
  Withering Beauty   http://www.csszengarden.com/?cssfile=/204/204.css  
  LuGoZee   http://www.csszengarden.com/?cssfile=/192/192.css  
  Vertigo   http://www.csszengarden.com/?cssfile=/180/180.css  
  Greece Remembrance   http://www.csszengarden.com/?cssfile=/169/169.css  
  Creepy Crawly   http://www.csszengarden.com/?cssfile=/038/038.css  
  Self-Growth   http://www.csszengarden.com/?cssfile=/053/053.css  
  I Dream in Color   http://www.csszengarden.com/?cssfile=/045/045.css  
  Si6   http://www.csszengarden.com/?cssfile=/044/044.css  
  Night Drive   http://www.csszengarden.com/?cssfile=/064/064.css  
  Retro Theater   http://www.csszengarden.com/?cssfile=202/202.css  

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 it wants to flow to the lowest available space. You can't stop it, that's its nature.

It's appearance is governed by default browser settings, 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!

The reasons for these wiley ways of HTML lay in the original intent:

  • The initial intent of HTML was to share documents electronically. But no one knew what kind of software would be used to view them, so semantic meaning was prioritized over presentation. The HTML specification abstracted everything intentionally. And indeed you could recongnize a header for a header, and a paragraph for a paragraph, but that was about the extent of it. All you needed was a HTML savvy browser.

    The results were like going back 15 years in desktop publishing. Gone were most of the formatting controls we gained year by year: multi-column layouts, text that flowed through pages of a like deminsion, flexible tab rulers.When it came to styling and controlling layout, designers had lost many of their familar tools, and they had to resort to extreme measures to get control of the basics.

    There were no precise, predictable ways of formatting text and placing graphics. Browser makers like NetScape started offering special extensions to HTML, but acceptance and was fragmented. Other browsers offered their own solutions. Standards grew slowly, if at all. Loyalties scattered. Imprecision, unpredictability and unattainability were the center of a designer's daily work. Hope was a central figure on the horizon.

  • to make a linkable documents (hypertext)
  • to markup the document with tags that would express the semantic and structural nature of the document, 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:

http://www.w3.org/TR/CSS2/

http://www.w3.org/Style/CSS/

MezzoBlue (and links from MezzoBlue):

http://www.mezzoblue.com/zengarden/resources/

http://www.alvit.de/handbook/

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.

http://movielibrary.lynda.com/html/modPage.asp?ID=708

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:

http://movielibrary.lynda.com/html/modPage.asp?ID=665

More info and free download of Firefox's CSS toolbar?

https://addons.mozilla.org/en-US/firefox/addon/60

 

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:

http://movielibrary.lynda.com/html/modListing.asp?sid=29

Zen Garden Resource Guide for advanced features

http://www.mezzoblue.com/zengarden/resources

Behind the scenes with a Zen Garden Designers

Douglas Bowman

http://www.stopdesign.com/articles/design_process/

http://www.stopdesign.com/log/2003/05/27/in_the_garden.html

Bobby van der Sluis

http://www.bobbyvandersluis.com/articles/garden_party/index.html

An online CSS list and rollover cookbook

http://css.maxdesign.com.au/listamatic/

 

 

Mac Consulting:

Macintosh Consulting, tutoring, and web design

 

 
























































Tags: CSS Zen Garden, Cascading Style Sheets, CSS, HTML, Hakon Wium Lie, Bert Bos

Internal links: CSSApplicationSkins