More Eric Meyer on CSS

Got something to say?

Share your comments on this topic with other web professionals

Published on July 28, 2004

Are you right for this book?

I have books on my bookshelf that I’ve never read. I bought them for the knowledge they contain, somehow hoping that just having them in my possession would be enough to gain the skills promised by the titles, some sort of magical mind-melding technique, all that hidden knowledge leaching silently across the room, lodging permanently in my brain for future retrieval.

When I bought “Eric Meyer on CSS” it wasn’t like that, the title didn’t promise that it would make me an expert, just that Eric Meyer knew all about CSS and was prepared to share. I actually managed to read it and the magical mind meld did, in fact, take place, so I was really quite excited to discover that there was a sequel—“More Eric Meyer on CSS.”

I think Eric hates waste, he doesn’t want his work to languish unread on bookshelves like mine, so he devotes two whole pages of his introduction helping you to decide if you will benefit from buying the book. If you shop online, he’s published that part of the book on the companion Web site.

In briefest summary: if you hand-code your Web pages, you’re good with HTML and have dabbled with CSS but want to take it to the next level, then you qualify to read this book.

On the other hand, if you’re a WYSIWG Web designer wishing things would stay the same and wondering what all the Web standards fuss is about then step away now, nothing for you here.

I do, I understand.

There’s an ancient Chinese proverb that goes something like “I hear I know, I see I remember, I do I understand.” Embracing that philosophy, this is a very hands-on book. You could read it on the train, the clear explanations and full-color illustrations make it pleasant enough, but to really get the benefit you will want to read and “do” at the same time.

If you’re like me, then you’ll want to read it more than once, too. Sometimes the step-by-step approach gives an unexpected effect in your working file and only by reading the next paragraph or two does the reason (and solution) become clear. The hugely positive side of this is that the next time you see the same “mistake” affecting your design, you’ll have a much better understanding of why it’s doing it and what to do to put it right.

For example, there’s a point in project 6 (CSS-driven Drop-Down Menus) where declaring position:relative on the list items suddenly produces a mess of overlapping text on screen. Three paragraphs later it’s all sorted out, but the reason for the overlap and how to resolve it is now clearly embedded in my brain.

If you’re worrying about a lot of typing, don’t. You won’t have to type every line of code or make your own graphics, Eric has thoughtfully provided copies of all the project files for you to download from the companion Web site. There are stage-by-stage file copies too, so cutting and pasting from the next stage of the process into your working file makes things a lot simpler. This is a great timesaver, most of the projects can be worked through in less than a couple of hours.

While there’s no need to work the projects in sequence, as each one is a standalone project in its own right, there is a process of each project building on elements of the last. So, if you’re still moving forward with CSS, a linear read of the book is a good idea, whereas those of you looking for a new CSS trick or two will find dipping and diving into the book no problem at all. The addition of an effective and clear index means that using the book as a reference is also enjoyable.

Foreword by Douglas Bowman
Introduction

Converting an Existing Page
Styling a Photo Collection
Styling a Financial Report
Positioning in the Background
List-Based Menus
CSS-Driven Drop-Down Menus
Opening the Doors to Attractive Tabs
Styling a Weblog
Designing a Home Page
Designing in the Garden

Real life, real solutions

Eric has chosen his project topics well, picking up on current design trends and new CSS techniques and applying them to simple but realistic examples.

Not all of the techniques will work cross-browser without some CSS hacks, and some of the hacks will cause your code to be invalid. Where this does happen, Eric clearly explains why the hack is needed, how it works and what the alternatives are. The choice, to hack or not to hack, is placed in your hands.

At the end of each project there is a short section called “Branching Out” where Eric issues a challenge or challenges to stretch the techniques you’ve been shown and take them in different directions, I’d have liked to see an answers section – perhaps that’s the next book, or a good idea for a Web site?

So what do you get?

There are two projects that will help you convert an existing site, one at the beginning and the other—a CSS Zen Garden contribution (number 100)—at the end of the book which demonstrates how to work with a graphic design and HTML constraints.

Three of the projects cover user interface: making horizontal or vertical navigation menus from lists; applying resizable tabs to lists as menus; and creating drop-down, heirarchical menus without a whiff of JavaScript.

Project four unravels the mystery of simulating translucent layering, an effective technique, simple but stylish. For the bloggers and self-publishers there are two chapters on using CSS in your homepage and styling a blog.

Projects two and three focus on the more specialist needs, styling for a collection of photos, which deals with floats, float alignment and float clearing, and styling a financial report, which takes you through the issues of row shading and print styling with CSS.

All in all, the book covers the common issues facing Web designers moving to CSS from a table layout background, answering all the questions that appear so frequently on mailing lists and Web forums

Extra, Extra, read all about it.

What sets this book apart for me is the abundance of margin notes and “asides.”

Throughout the book there are many “asides” (detailed explanations of the technique or alternatives you could choose). They are color-coded and can be safely skipped whilst doing the project, but they are a very useful addition.

The margin notes come in three forms: Note, Warning and Web site notes. The latter links the text to the Web site—which files you need to download, etc. Warnings highlight parts of the project that might cause cross-browser problems, and Notes, my favorites, add little snippets of very useful information.

For example, one snippet I picked up from the margin notes was that absolutely positioning an element always generates a block-level box, regardless of what sort of box it would have generated normally. Another was that when setting a border on an element, you don’t need to declare a color, as the border color will be the same as the element color unless specifically declared otherwise.

Summing up

I liked…

The full color printed screengrabs
The margin notes
The aside sections
The excellent index
The clear print and simple layout
The structure of each project
The project topics
The companion Web site

I didn’t like…

What’s not to like?

Maybe the screenshots were a bit small, but if you’re working along, they’re only there to confirm you’re getting it right. I was also a bit disappointed about the “branching out” section, which felt a bit like being given homework on your last day at school.

Without a tutor to mark your work, how will you know if you got it right? Perhaps Eric will assess it for you. You could always subscribe to the CSS-Discuss list and ask him.

Is this book for you?

If you fit the profile of people that are “right for this book,” don’t hesitate: go out right now and get a copy. Oh, and when you’ve read it, don’t just shelve it, take it wherever you go, the bright red cover will make you instantly recognizable as a CSS expert.

More Eric Meyer on CSS
Eric A. Meyer
New Riders, 2004, 304pp.
$30.60 USDs

Companion Web site: http://more.ericmeyeroncss.com
CSS-Discuss list: http://www.css-discuss.org/