Digital Web Magazine

The web professional's online magazine of choice.

Eric Meyer on CSS: Mastering the Language of Web Design

Got something to say?

Share your comments on this topic with other web professionals

In: Reviews > Book Reviews

By James McNally

Published on June 25, 2002

Eric Meyer on CSS: Mastering the Language of Web Design In 2000, O'Reilly published Eric Meyer's, Cascading Style Sheets: The Definitive Guide. Despite the fact that it was a reference book, Meyer's conversational writing style and sense of humor made it a joy to read. It quickly established Meyer as the "go-to guy" for CSS, which Jeffrey Zeldman makes hilariously clear in his foreword to Meyer's latest book, Eric Meyer on CSS: Mastering the Language of Web Design: "My name is Jeffrey, and I'm an Eric Meyer addict." Where the O'Reilly book was a dictionary, here, Meyer has written a collection of short stories. Each story (chapter) is a project that any of us might face, and Meyer shows us how easy and rewarding it is to replace our old HTML workarounds with the elegance of Cascading Style Sheets.

I won't try to make the case for CSS here. If you're reading this at all, you're someone who's at least interested in making your web pages easier to change, and more standards-compliant to boot. And this book is not for someone who's not comfortable getting his hands dirty, so to speak. It's aimed at someone who has at least a familiarity with the conventions of CSS and is looking for practical applications.

Each project is small enough to be completed in a few hours or less, and to give the reader a real sense of mastery. Meyer also shows a few different approaches to the same problems, showing the strengths and weaknesses of each approach. Here's the breakdown of chapters:

  1. Converting an Existing Web Page
  2. Styling a Press Release
  3. Styling an Events Calendar
  4. Bringing Hyperlinks to Life
  5. How to Skin a Menu
  6. Styling for Print
  7. Making an Input Form Look Good
  8. Creating an Online Greeting Card
  9. Multicolumn Layout
  10. Sneaking Out of the Box
  11. Positioning a Better Design
  12. Fixing Your Backgrounds
  13. Eric Meyer on CSS in CSS

I've decided to focus on the chapter on multi-column layout to give a sense of Meyer's approach. Many of us who keep weblogs choose to use a multi-columnar layout on the front page in order to include links to other sections and other sites. In the past, this meant using lots of tables. Keeping track of rows and columns was hard enough, and became even more complicated if the tables were nested. Though not perfectly compatible with version 4 browsers, table-less layouts use less markup while allowing the complete separation of style from structure.

I took the opportunity to redesign my weblog in the process of transferring everything from one tool, Blogger to another, Movable Type. I found that the quickest and least complicated method for approximating my previous, table-based layout was to use the first method Meyer discusses in Chapter 9, simply floating the content after dividing everything into logical divisions (in HTML parlance, breaking the page up into <div>s).

old Consolation Champs layout

new Consolation Champs layout

The only limitation inherent in the float method is that the content must be organized in a particular sequence. The <div> to be floated right must come before the <div> which will occupy the left side of the page. Once that is taken care of, we have only to define how much space the sidebar will take, and how much will be left for the main content section. Since I wanted a gutter between the columns, I wasn't worried about the two <div>s' widths adding up to 100%. I set the main column's width to 65%:

div#maincontent {width: 65%}

and the sidebar to 28% (which I arrived at mostly through trial and error:

div#rightcontent {width: 28%; float: right;}

Meyer advises to specifically set the margin and padding on all elements. I wanted a bit of padding on the content in the main section, so now we have:

div#maincontent {width: 65%; margin: 0; padding: 1em; }

div#rightcontent {width: 28%; float: right; margin: 0; padding: 0;}

Now I need to style the text and add borders in each section. For the main content area, I can do that in the <div> I have already:

div#maincontent {width: 65%; background: #fff; border: 2px solid black; margin: 0; padding: 1em;}

For the sidebar, I decided to subdivide the content into several subsections, entitled "table of content" (which links to my online articles), "search," "here" (with links to other content on the site), "there" (external links), and archives. I added borders in such a way that it looks like one long column with lines between the sections:

div#rightcontent {width: 28%; float: right; margin: 0; padding: 0;}

div#toc {background: #222; border: 2px solid black; margin: 0; padding: 0.5em; color: #fff; font-size: 10px;}

div#search {background: #fff; border-right: 2px solid black; border-left: 2px solid black; margin: 0; padding: 0.5em;}

div#here {background: #fff; border: 2px solid black; border-bottom: none; margin: 0; padding: 0.5em; font-size: 10px;}

div#there {background: #fff; border: 2px solid black;border-bottom: none; margin: 0; padding: 0.5em; font-size: 10px;}

div#archives {background: #fff; border: 2px solid black; margin: 0; padding: 0.5em; font-size: 10px;}

And that was it. With a little help from Eric Meyer, the bulk of my layout was accomplished using some <div> tags and a few lines of CSS. Before, I had lines and lines of code defining table cells and rows. Afterwards, I'm left with a few simple declarations.

Though my example shows how the book can be used as a sort of cookbook, those wanting to get a firm grasp on the principles of CSS can simply move through each of the projects one by one, building on their knowledge as they go.

There has been much written about the promise of CSS, but the current reality sometimes makes us wonder why we should bother. Most older browsers don't fully support CSS, and even current browsers have different opinions of how to interpret it. Despite that, Meyer is a wise teacher, pointing out ways to avoid surprises. It might seem that nothing has really changed, since we still have to use workarounds for various browsers, but in reality, even the workarounds are much easier to implement and change once the structure and style of the page have been separated. Most importantly, there are many developers pushing the browser makers to conform to the World Wide Web Consortium's official specification for CSS (see, for instance, the Web Standards Project). It is safe to say that CSS is here to stay, and that browsers will become more and more compliant in the future, which makes it all the more important to write compliant markup now.

The appearance of a book such as this signals the maturation of CSS as a web design tool, not just for the codeheads, but for anyone who is capable of working with HTML. Meyer's elegant and straightforward writing makes the elegance of a CSS solution apparent and attractive. Though I hope I won't become an Eric Meyer addict, this is definitely a book I'll be returning to again and again.

Eric Meyer on CSS: Mastering the Language of Web Design
by Eric Meyer, Foreword by Jeffrey Zeldman

2002, New Riders
US$45
CDN$69.99
UK£34.99

Additional Resources

Eric Meyer on CSS (web site for the book)

World Wide Web Consortium

Web Standards Project

Cascading Style Sheets: The Definitive Guide

Got something to say?

Share your comments  with other professionals (0 comments)

Related Topics: CSS, Web Design

 

James McNally is a Toronto based freelance writer and web designer. He is desperately clawing his way back into a new media career. His personal weblog is at http://www.consolationchamps.com/

Media Temple

via Ad Packs