CSS Mastery Advanced Web Standards Solutions

**** Jan282010

This update to the first edition (published in 2006) shows just how far web development with CSS has come. We can now, with caution, take the approach of employing advanced CSS techniques over more bloated and complex solutions for things like rounded corner boxes and drop shadows. It is a solid book that can serve as both reference and inspiration; however, it does have a few problems, including poor editing.

The Good: Foundational concepts in CSS

CSS Mastery starts out with an overview of semantic, structural markup, and foundational concepts in CSS like the cascade, specificity, and inheritance. Chapter 3 gives clear explanations of:

  • the box model and IE’s box model oddities
  • collapsing vertical margins
  • the difference between block and inline boxes
  • normal flow, absolute positioning, and floating

The following few chapters cover the basics of everything you normally want to accomplish with CSS, such as using background images, styling links, lists, navigation, forms and tables, and creating complex layouts. I have a lot more sticky notes in CSS Mastery starting with Chapter 7: “Styling Forms and Data Tables”, which includes some good techniques for styling forms while maintaining accessibility. Chapter 8 covers how to achieve fixed-width, liquid, and elastic layouts, and more importantly looks at some of the pluses and pitfalls of each.

Chapter 9, “Bugs and Bug Fixing” describes a sound approach to tracking down problems in your CSS (most of which, the author points out, probably aren’t really due to browser bugs) and explains IE’s crazy hasLayout property.

The last two chapters go beyond merely describing a series of techniques to actually putting them to use in the context of (sort of) real websites. This is excellent for reinforcing what was introduced in previous chapters, and it’s always enlightening to see expert designers’ (or, as the cover states, “two of the world’s greatest CSS masters”) approaches. These chapters are rather short and make a whirlwind tour of the two sites; it would be great to see one of these case studies expanded into its own book.

The Bad: Code errors

The technical editing in this book leaves a lot to be desired. There are several glaring errors. On page 138, for example, the authors intend to demonstrate the technique of using an id on the body tag and classes on navigation list items to highlight the current page. However, though the text clearly states “each list item in the main navigation is given a class name based on the name of the page the item relates to,” the list items in the code snippet have no class names:

<body id="home">
  <ul> class="nav">
    <li><a href="home.htm">Home</a></li>
    <li><a href="about.htm"></a></li>

Thus, the corresponding CSS given, with a selector such as #home .nav .home a { } would have no effect at all.

An even more confusing example is in one of the case studies, on page 234. The example illustrates a technique for equal-hight boxes with only CSS (something I was keen to learn about, in fact). “The trickā€¦is to give each box a large amount of bottom padding and then remove this height with a similar amount of negative margin.” Okay, makes sense. But later in the same paragraph: “I’m giving each element a bottom padding of 520 pixels and a bottom margin of 500 pixels.” Wait, shouldn’t that be a negative margin? I’ll just check the code snippet. No, twice it is shown as

padding-bottom: 520px;
margin-bottom: 500px;

That’s not going to work; if you download the code samples from the website, you will see it should indeed be a negative bottom margin. The point is, Friends of Ed needs more attentive technical editing.


This is an excellent book for those learning CSS who want to get up to speed quickly, and is useful for experienced developers as well. Hopefully it will go to a second printing, and the multiple significant errors in the examples will be corrected.

Respond to this review

Author(s)Andy Budd
PublisherFriends of ED

No comments yet…Be the first!

Comments are closed for this article.