Learning to Design Web Pages with Style
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.
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.
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.
- A Switch for Your Pi
- Papa's Got a Brand New NAS
- Applied Expert Systems, Inc.'s CleverView for TCP/IP on Linux
- Returning Values from Bash Functions
- Tech Tip: Really Simple HTTP Server with Python
- Simplenote, Simply Awesome!
- Panther MPC, Inc.'s Panther Alpha
- Rogue Wave Software's TotalView for HPC and CodeDynamics
- Debugging Democracy
- NethServer: Linux without All That Linux Stuff