Learning to Design Web Pages with Style

A review of Eric Meyer's new CSS book.
Format of Eric Meyer on CSS

The book, Eric Meyer on CSS is a good size, glossy book of about 325 pages. The illustrations are full color and numerous. Additionally, the book has a companion web site (www.ericmeyeroncss.com) where one can download the HTML and CSS code presented in the book.

Meyer uses a format of demonstrating CSS web design methods similar to television programs in which an artist does an oil painting of a landscape and explains to the viewer what he's doing as he goes along. The artist explains the colors that he mixes and his methods of shading and so forth. Meyer's book is like this, and it's also like one of those woodworking or carpentry shows where the host explains each step of the construction process. Except in this case, Meyer explains the use of CSS; he's the artist and the master carpenter of CSS. Meyer says, “The goal was to show readers how to use CSS in actual projects—the kinds of things they might themselves want or have to do.” In his job at Netscape, Meyer assists web designers of major web sites in using CSS. This book is the average web designer's access to his talents, and as such it's a real treat to read and to work through.

Projects

Each chapter of Meyer's new book presents a different web design project. Each project starts out by defining its goals and showing the reader a screen shot of the finished project he's working toward. “In each of the 13 projects, I start with an unstyled file and add on CSS bit by bit until there's a finished project”, Meyer says. For each project, a screenshot is provided of each step of almost every change that's made to the web page. The related HTML code and style rules are shown as each project progresses, and changes made to the styles are shown in red. At the end of each project or every major stage of some projects, the complete CSS style sheet is provided. It's fascinating to see how the projects unfold.

As an example, the first chapter or project involves a web page that has been created by normal methods, not incorporating a style sheet. Meyer starts with a web page that was cleanly and typically designed with several tables, tables within tables, font tags and other redundant formatting tags. He then strips the page of all these tags, so he's left with a very plain page consisting of mostly content and little HTML. Next he systematically adds style sheet rules to bring the page back to its original look, but without all of the HTML overhead. The result is a much smaller document and a style sheet that can be reused to assure consistency in design throughout the site—and one that is much more manageable.

Several other fascinating and inspiring projects are included in the book. “Every project was intended to show the reader how the pieces go together. It's one thing to understand what various CSS properties do, but seeing how to put them together in interesting ways is quite another”, says Meyer. In one project Meyer takes an events calendar and formats it rather nicely to highlight special events (see image above). Another project deals with styling a sidebar menu (see image below). Another project constructs a multicolumn web page without the aid of tables—quite a trick. He does it with <div> tags and a style sheet. And, in another project, Meyer shows the process of making a separate set of style rules for printing a web page versus viewing it on screen.

Using the Book

Eric Meyer on CSS is not primarily a reference book, although it can be used as one. Instead, it's designed as an instructional book, a learning aid. As Meyer says, “It's designed specifically to be hands-on, which I think is the best way to learn anything. Besides, project-centric books tend to be more fun to read, and certainly are more fun for me to write.” How you learn best dictates how you might use the book. To get the most out of the book, you may want to download the HTML code off of the book's companion web site and load it up in your text editor and web browser. The site provides the HTML code and style sheets for every step of each project. So, you can grab only the first page and edit it as instructed by the book, or you can open up each individual HTML document to see the changes Meyer has made each step of the way. Playing along is particularly useful if you follow through and do the exercises at the end of each chapter. In the exercises, Meyer presents instructions as to how you might further tweak the web pages, along with a screenshot of how it should look when you're finished.

Playing along doesn't work well for me, however. I must confess that I'm not disciplined enough for sample exercises. I need real-life situations from which to learn. So, when I read through Meyer's book, I closely studied the style rules and the illustrations in the book. When I hit on something that inspired—which was often—I dropped the book and ran over to my computer and modified one of my web sites to include what I learned. Sometimes my changes didn't work like I thought they would, and I had to go back and reread the particular section that inspired me. This usually involved comparing my surrounding HTML and my style sheet to the project in the book. This is how I learn best.

Whether you play with the book's code or use your own as I did, experimenting for yourself is useful in getting the most out of the book. If you put in the effort, you will be pleased and surprised at how much you can accomplish with CSS.

Russell J. T. Dyer is a Perl programmer, a MySQL developer and a web designer living and working on a consulting basis in the New Orleans area. He's been working with Linux for about six years now. He welcomes reader responses to his articles.

All images in this article were taken from Eric Meyer on CSS: Mastering the Language of Web Design, Copyright 2003. They were reproduced by permission of New Riders.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Very useful files search

Anonymous's picture

Very useful files search engine. http://Indexoffiles.com is a search engine designed to search files in various file sharing and uploading sites.

Importance of CSS

Edgard Durand's picture

I think is very important for all webmasters to made the switch to use CSS on their websites.

Re: Learning to Design Web Pages with Style

Anonymous's picture

Erik Meyer is also the author of the CSS reference book, Cascading Style Sheets: The Definitive Guide published by O'Reilly, as well as Cascading Style Sheets 2.0 Programmer's Reference published by Osborne/McGraw-Hill. I haven't read the latter, but the O'Reilly book I use almost everyday. Could use a new edition, tho...

--scott trotter

Re: CSS: The Definitive Guide

RussellDyer's picture

I like Eric Meyer's O'Reilly book, CSS: The Definitive Guide, too. Even though it's still useful, you're right it does need updating. Eric told me that he is working on a second edition. He expects to have it finished by the end of the Summer. O'Reilly says they're planning on having it in the book stores by the end of this year. It will cover CSS 1 & 2 completely and will include an overview of CSS 3.

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState