• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL



What you're holding in your hands right now, assuming you aren't viewing a preview online, is more or less a sequel to Eric Meyer on CSS, which was published in 2002 to fairly resounding acclaim. The project-based approach drew high marks, and it seems that a lot of people liked the feeling of being able to watch over my shoulder as I worked through the projects. That was exactly the feeling I aimed to provide, and I've endeavored to create the same feeling with this book.

So, if you do buy this book and you like it, you can get more of the same in Eric Meyer on CSS. On the other hand, it's important to note that you don't have to own Eric Meyer on CSS to use and enjoy this book. Each stands on its own as a self-contained, independent work. So don't be afraid that you won't be able to understand what the characters in this book are doing because you never read the first one. I don't have any characters.

There is a plot, though (actually, two of them). The first plot describes a journey of learning and experimentation, wherein our hero (that's you) follows the path of an experienced guide and learns the ways of a new and wondrous land. The second plot (kind of a subplot) is an underhanded attempt to lure you into using more CSS by tempting you with design flexibility, improved accessibility, reduced page weight, and cool visual effects.

Should You Buy This book?

This isn't a facetious question. As proud as I am of the work contained in these pages, I'm also keenly aware that this book is not for every reader. So let me take a moment to describe two kinds of readers: those for whom this book was written and those for whom it was not.

Those for Whom This Book Is Meant

You ought to find this book useful if you match one or more of the following criteria:

  • You want a hands-on, practical guide to using CSS in real-world projects. That's exactly what this book is all about.

  • You're a hands-on learner, someone who gets a lot more out of interactive experimenting than from just reading a book. Despite the fact that this is indeed a book, it's been intentionally designed to let the reader “play along at home,” as it were.

  • You've been meaning to increase your CSS skills for some time now, but you keep putting it off because CSS is a large, complex subject, and you don't have a roadmap for how to get to the next level.

  • You've always wanted someone to show you how to convert a typical, old-school, pure-HTML design into a pure-CSS design and to explain why it's to your advantage to do so. If that's the case, go to Project 1, “Converting an Existing Page,” without another moment's delay.

  • If asked, you would describe your HTML skill level as “intermediate” or “expert” and your CSS skill level as “basic” or “intermediate.” In other words, you understand HTML fairly well and have used enough CSS to have a basic grasp of how it's written.

Those for Whom This Book Is Not Meant

You might not find this book to be useful if one or more of the following describes you:

  • You've never used or even seen CSS before. Although some basic terms are defined in the text, the assumption here is that the reader knows the basics of writing CSS and is fairly proficient with HTML authoring. Some readers of Eric Meyer on CSS said they were able to use it even though they'd hardly ever touched CSS before, but this book was not written with the beginner in mind.

  • You want to understand all of the subtleties of the theory underlying CSS and grasp the nuances of the specification. There are now many books on the market that occupy that niche. The focus here is on demonstrating effects that work.

  • You've only done Web design in a point-and-click editing environment. This book assumes that you can edit (or have edited) HTML and CSS by hand, and its narrative is based on that assumption. Its projects may be easily reproducible in a point-and-click editor, but the book was not written with such editors in mind. As it happens, Eric Meyer on CSS was a big hit with a lot of Dreamweaver and GoLive users, so that's a point to consider. Nevertheless, the text assumes you'll be dealing directly with the markup and styles.

  • You want a book that will tell you how to write CSS that will look the same in all browsers on all platforms, including Netscape 4.x and Explorer 3.x. See the following section, “What You Can Expect from This Book,” for details.

  • You've read my other works and hate the personal, familiar tone I take in my writing. I promise you that my writing style has changed very little.

What You Can Expect from This Book

From the outset, my intent has been to write an engaging, interactive book that focuses on practical and interesting uses of CSS that can be deployed in today's browsers. To do this, each project evolves from having no styles to being fully styled and ready for deployment on the Web. If I've done my job well, you should get the feeling of watching over my shoulder as I work on a project, with me commenting on what I'm doing as I do it.

Although you can simply read the text and look at the figures to get a sense of how a project is evolving, I think the best way to work along with the book is to have a Web browser and a text editor open as you read. That way, you can follow along with the changes I make in the text by physically making the same changes in your project file and seeing the changes in your own Web browser.

There is one point on which I want to be very clear: The techniques shown in this book are generally meant for browsers whose version number is greater than or equal to 5 (well, and Safari 1.0+). If you have to design a site that looks the same in Explorer 4.x and Netscape 4.x as it does in IE6.x and NS7.x, this book is probably not for you.

Project Overview

In keeping with the practical, hands-on nature of the book, I've divided it up into a series of 10 projects—each one effectively a chapter. It is possible to skip around from project to project as the spirit moves you, as each project was written to stand on its own as much as possible. However, the book was still written with the “linear reader” in mind; if you read from front to back, you should find that the projects build on one another.

With a few exceptions, the projects are titled in as self-obvious a way as possible. For example, Project 1, “Converting an Existing Page,” takes a page designed using only HTML markup and spacer GIFs, and converts it to a pure CSS design that uses positioning for layout instead of tables.

Projects 2 and 3 cover some fairly basic projects, from styling a photo gallery to making a financial report look better than it would by default. Project 4 increases the sophistication somewhat by showing how to use backgrounds in creative ways, and how to mix relative and absolute measures in order to set up translucency effects.

Then, in Projects 5 through 7, the topic of discussion is using lists in various ways. The first of these three projects uses a list of links to create a sidebar menu, complete with two different layouts for the same list. The second project in the trilogy takes a series of nested lists and turns them into a dynamic set of “drop-down” menus that work in most browsers (and that includes IE/Win). The last of the three projects explores using the Sliding Doors technique to turn a list of links into a set of “tabs.”

Projects 8 and 9 consider the styling of a weblog and the styling of a home page around that weblog, respectively. Project 10 is the most ambitious and complex of the book: It takes a design for the CSS Zen Garden and works through the application from design to markup. This was done by soliciting a design from the Garden's creator and then working to translate the design into a styled document. For those of you who work in the print world, we take a comp and turn it into a finished product.

Companion Web Site

Each project in this book is based on the editing of a real project file. You can download the project files either for the entire book all at once or for each chapter individually. The project files are available on the book's companion Web site: http://more.ericmeyeroncss.com/. There you will find the files that were used to produce the figures throughout the book, any errata to the book, and supplemental materials like bonus text, commentary from the author, and links to useful online resources.

For each project, there will be an archive of all the files you need to work along with the text; this includes any graphic files needed as well as a version of the project file at its outset. These files follow a consistent naming scheme; for example, the figure that corresponds to Figure 7.3 will be named ch0703.html, the Project 1 working file will be ch01proj.html. This is the file you should open up with a text editor and make changes to as the project moves forward. You can also load it into a Web browser and hit Reload at each step to see what effect the new styles have.

You'll also find the files for the first book, Eric Meyer on CSS. You can download them whether or not you've read the book, but they probably won't make as much sense if you haven't.


This book follows a few typographical conventions that you should be familiar with before proceeding.

A new term is set in italics the first time it is introduced. There will often be a short definition of the term nearby. Program text, functions, variables, and other “computer language” are set in a fixed-pitch font. In regular text, it will also be a dark blue color—for example, when mentioning the property margin or a value like 10px.

Code blocks are set entirely in a fixed-pitch font. Any blue text within a code block indicates a change to the code from its previous state. Most code blocks show only a fragment of the overall document or style sheet, with the lines to be changed (or inserted) surrounded by unchanged text. This extra text provides a sense of context, making it easier to find the part you need to change if you're following along with the text. Here is an example:

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

Every computer book has its own style of presenting information. As you flip through this book, you'll notice that it has an interesting layout. Here are the layout conventions:

▸▸ Asides

These usually contain detailed explanations that are related to the main text but are not a part of the project itself. They might also offer alternative approaches or ideas to those demonstrated in a project. In every case, they can be skipped without disrupting the project's flow.


These are meant to be helpful annotations to the main text, and there are a lot of them in this book. These are used to provide tips, comments, definitions of new terms, tangential points, or related bits of information.


These indicate a point that might cause problems in some browsers or a similarly grave note of caution.

Web site notes provide guidance as to which files to download or load into a Web browser, or things to check out on the Web.

Finally, at the end of each project you will find a section titled “Branching Out.” This will present three short exercises that invite you to try modifying the finished project in certain ways. These “branches” are certainly not the end of what you can do, but they may help you start experimenting with the concepts presented in the project. Think of them as jumping-off points for your own design ideas and also as interesting challenges in their own right. If you can match the illustrations with your own styles, you'll be well on your way to writing creative CSS of your own.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint