A review of Eric Meyer's new CSS book.
Title: Eric Meyer on CSS: Mastering the Language of Web Design
Author: Eric Meyer
Publisher: New Riders
ISBN: 0-7357-1245-X
Price: $45.00 US, $69.99 CAN
Have you ever looked at the source code of a well-designed web page and were surprised to find only minimal HTML tags and a reference to a style sheet? That's the beauty of cascading style sheets (CSS)--simple, easy to maintain HTML code. A lot can be done with CSS. Many web designers have used CSS, but most don't take advantage of all it has to offer. In case you're not familiar with CSS, it's an aspect of web design for improving the look of a web page and for indexing the look of several web pages. It operates off of one document that lists text and other layout properties. With changes that are occurring in the web design world, knowing how to use CSS effectively is going to be necessary if you design web pages. If you don't believe it, consider the fact that <font> and some other formatting tags are being eliminated. “At this point in the game, it makes about as much sense to design without CSS as it does to write web pages without using HTML”, says Eric Meyer, Standards Evangelist for Netscape. Without CSS, you won't be able to change the appearance of text in your HTML documents.
Several good reference books have been written that can help you learn how to design web pages with CSS. However, being able to look up CSS properties and knowing how to apply them to make great-looking web pages is a very different matter. The difficulty lies in that CSS, in a sense, is a kind of artistic tool for web design. As such, acquiring skills in using CSS requires experimentation and, to make the process easier, the guidance of someone who is already talented in its use. To that end, Eric Meyer, who is also an Invited Expert of the Web Consortium's (www.w3.org) CSS working group, has written a new book in which he demonstrates how to design web pages with CSS. The book is called, Eric Meyer on CSS: Mastering the Language of Web Design. Before reviewing Meyer's new book, though, for those who are unfamiliar with CSS, let me explain it a bit and give a few examples. If you already know the basics of CSS, then skip over this next section.
Introduction to CSS
A style sheet is a list of instructions or rules for the web browser, so it knows how to display a particular web page. Without a style sheet, the browser will use its default settings for text and page layout. A style sheet can be located within a web page or it can be contained in a separate document and linked to from a web page. If a style sheet is located within a web page, then style rules are placed between opening and closing style tags (<style></style>). Styles and style tags must be placed inside the opening and closing header tags (<head></head>). They cannot, however, be placed within any other tags that might be located inside the header (e.g., <title></title>).
Within style tags, one can place style instructions that will be used throughout the web page. For instance, if you wanted all bold-faced text to be in red in addition to being bold, without a style sheet you would have to go through the HTML document and look for each instance of <b> and add a font tag after them like this, <font color=“red”> and a closing font tag (</font>) before the closing bold faced tags (</b>). Instead of doing all of that, you could simply add the following style sheet to the top of the web page:
<style>
b{color: red;}</style>
For consistency of style and to save time typing the style sheet into each web page, you can set up a separate style sheet document and link all of your web pages to it. Links to external style sheets read like this:
<link rel="stylesheet" type="text/css" href="main.css">
In this link, the name of the style sheet document is main.css, and it's located in the same directory as the web page that is linked to it. A directory path can be added to the href value if the style sheet is not in the same directory. Incidentally, it's customary to name style sheet files with an extension of “css”.
With an external style sheet, if you wanted to modify the color and some other font attributes of the main heading on all of the web pages linked to the style sheet, you could simply add this rule to your style sheet:
h1 {
text-size: 200%;
text-align: center;
color: navy;
}
In this example, all of the text enclosed in the <h1> heading tags in all of the web pages linked to this style sheet will be displayed double the size of the normal text, centered and in navy blue. As you can see, once a style sheet document is set up properly, one can easily make changes to all associated web pages simply by changing the style sheet. If your site has hundreds of web pages, it would take quite some time to implement any formatting changes. However, it would only take you seconds to make the changes with CSS.
There is a long list of style properties that one can set with CSS. If you'd like to learn more about the basics of CSS, you can go to the CSS section of the Web Consortium's site. A good reference book on CSS is one of Meyer's other books, Cascading Style Sheets: The Definitive Guide. It has become the staple of CSS designers, but I would suggest you consider buying Meyer's new book (reviewed below) as well.
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.