Book Review

Tom Zillner, Editor

Eric Meyer on CSS

Mastering the Language of Web Design
by Eric A. Meyer. Indianapolis, Ind.: New Riders, 2002. 322p. $45 (ISBN 0-73571-245-X).

Most of us have seen visually dazzling Web sites—with out-of-date content. Often this happens because the site was designed by an outside graphic designer who used complex tools and techniques that made it difficult for the organization to maintain the site in-house.

Much of the early growth of the Internet was fueled by the ease of creating HTML pages. Learn a few simple tags like <html>, <p>, and <a href=". . ."> and you, too, could create your very own Web page. Since those early days, the Web has grown not only in size, but in complexity. Pages created with a few simple HTML tags have given way to pages filled with code of sometimes impenetrable complexity. To achieve visual effects, many pages are filled with complex table structures and images meant to control positioning rather than convey content. The result is that pages grow larger and take longer to load. They become difficult to update. A decision to change the look of a site might require hundreds or thousands of individual changes.

A key concept that has been floating around for a long time is that the look of a Web page—its presentation—should be separated from its content. Separating content from presentation holds out the promise of making it possible to maintain Web sites much more easily, as well as making it possible to repurpose the content e.g., to make it possible to access it from PDAs and other devices as well as from browsers.

The tool that makes it possible to separate content from presentation in the Internet environment is Cas cading Style Sheets (CSS). First released as a recommendation in 1996 by the World Wide Web Consortium (W3C), an organization comprising Web stakeholders and experts whose purpose is to promote and enhance the Web, CSS is not yet widely implemented.

By separating content from presentation, CSS greatly simplifies the process of updating sites. Changing a font or color throughout a site can be done with a few keystrokes in the style sheet that controls the appearance of the site. Through the use of multiple style sheets, pages can be formatted differently for different uses, such as viewing in a browser or printing. Separating the formatting from the content makes the code of the page easier to understand.

A style sheet can be in the page it controls or it can be in a separate file that controls any number of pages linked to it. In short, CSS is a simple, elegant, effective, standards-based way to do Web pages.

Why then isn’t CSS used more widely than it is at present? In a word, browsers. The (in)famous Netscape/Explorer wars of the 1990s led to inconsistencies in how different browsers displayed HTML code, and the off-putting "Best viewed in . . . . " messages. Anyone who has tried to code pages for multiple browsers knows the frustration and difficulty of getting anything more than the simplest pages to display consistently across the gamut of the most popular browsers.

This is about to change. Browsers that render CSS more competently are finally appearing. According to Charlie Morris, 96 percent of online users have browsers with at least partial CSS1 support, and 80 percent are using browsers with good CSS2 support. 1 To quote John Allsopp, "CSS offers Web developers a powerful tool that helps simplify the complex task of maintaining Web sites, and provides sophisticated layout and design features for Web pages without the need for plugins, long download times, and expensive tools." 2

All of this makes the appearance of Eric Meyer on CSS particularly timely. Meyer is an acknowledged expert on CSS. He has been called a CSS guru, "the acknowledged master of CSS." 3 His job title at Netscape is Standards Evangelist. The significant improvement in the ability of the newer Netscape browsers to render CSS properly has been attributed to his influence.

This is Meyer's third book on CSS. His previous two books are: Cascading Style Sheets: The Definitive Guide (O'Reilly, 2000), which covers the theory behind CSS, and Cascading Style Sheets 2.0 Programmer's Reference (Osborne-McGraw-Hill, 2001), a CSS reference for Web authors. Meyer on CSS differs from the earlier books in that it is a practical, hands-on guide. The focus is on learning by doing. The book is divided into thirteen chapters, each of which presents a project creating a Web page using CSS techniques.

The companion Web site to the book (http://ericmeyeroncss.com) contains project files that readers can download. Starting with the bare-bones code consisting of just content marked up with structural HTML, one can follow Meyer as he builds up the style sheet, line-by-line, refreshing the browser after each addition to see the effect of the latest change. The code is presented in bite-size chunks, making it easy to follow along.

The first project, Converting an Existing Page, takes a page that uses complex tables to control positioning and that is filled with font and size attributes, strips it down to the bare essentials, then recreates the look of the page using CSS. The final result is an almost pixel-perfect reproduction, based on HTML code that is far simpler to understand and maintain. A technique I found particularly helpful in this project was the use of temporary styles to outline tables and table cells as a way of visualizing the structure of a page being converted to CSS:

<style type="text/css?> /* temporary styles */ table { border: 2px solid red; margin: 3px; } td { border: 1px dotted purple; padding: 2px; } </style>

Other CSS features covered include:

  • using background images;
  • changing the appearance of hyperlinks, including using the CSS command "a: hover," rather than JavaScript, to change the appearance of a hyperlink when the mouse is positioned over it;
  • using a second style sheet with the setting "media=’print’" to control the appearance of the printed version of a document;
  • styling online input forms;
  • setting the position of an element using both the float and position commands; and
  • creating multicolumn layouts without using tables.

Chapter 12, Fixing Your Back grounds, is a tour de force, demonstrating how CSS can achieve effects not possible with HTML alone. Using three images and a few CSS commands, the author creates a stunning effect–-a page with a background that remains fixed while the text scrolls. While few browsers currently incorporate the level of support for CSS to display the resulting page properly, it does illustrate the kinds of advanced effects that can be achieved using CSS.

Meyer is an engaging guide, leading readers through complex issues effortlessly, with clarity and humor. The light tone is deceptive; at first one is tempted to think the book is covering its topic superficially. Only after several chapters does one begin to realize the depth of Meyer’s mastery of CSS, and how much one has learned.

Meyer’s common sense, practical approach will be appreciated. One project whittles away at tables, another leaves them in. "Just do whatever makes sense" is the message. In addition to containing the project files, the Web site has additional information supplementing the book that is well worth reading, including sections on Picking a Rendering Mode, and Hiding Styles from Browsers. Meyer’s own Web site (www.meyerweb.com) includes additional CSS resources, including several cutting-edge CSS projects not covered in the book, among them a demonstration of how to create flyout menus using only CSS.

To summarize, Eric Meyer on CSS presents the concepts of CSS in a practical, project-based approach. Those who learn best by doing will benefit particularly from this method. The book presents CSS functions in a carefully planned sequence so the reader can thoroughly assimilate one concept before moving on to the next. The book includes a Branching Out section at the end of each chapter that encourages the reader to solidify her mastery of the topic by vary ing the design for the chapter’s project. This book is a must-read for anyone who creates or maintains Web pages.

— Thomas E. Lehman, University Libraries, Notre Dame University

References and Notes

   1. Charlie Morris, "Toss Out Your Tables! CSS Is the Scene!" Web Developer’s Virtual Library. Accessed Apr. 21, 2003, http://wdvl.internet.com/Authoring/ Style/Sheets/Positioning/Toss/ index.html.

   2. John Allsopp, "Introduction to CSS," The Complete CSS Guide. Accessed Apr. 21, 2003, www.westciv.com/style_ master/academy/css_tutorial/ introduction.

   3. WebReference.com, WebReference Update Newsletter, July 25, 2002. Accessed Apr. 21, 2003, www.webreference.com/ new/020725.html.