November 17, 2006

Book Review: CSS Mastery: Advanced Web Standards Solutions

Filed Under Book Reviews, Websites, Writing |

CSS Mastery: Advanced Web Standards Solutions
Andy Budd with Cameron Moll and Simon Collison

CSS Mastery, written by Andy Budd with Cameron Moll and Simon Collison, is perfect for all levels of CSS users; from novices to experts, there’s something in the book for everyone to learn.

CSS is short for Cascading Style Sheets, which, when used with HTML, gives web developers more control over how pages are displayed. It also allows the developer to control global styles with one file. For example, if you need to change a color or column width on 100 pages, simply change the CSS file and you’re done. CSS is a very powerful tool, and current trends in web design and development show that it will replace table-based designs.

The foundation of great CSS skills lies in constructing meaningful markup, i.e. code. I can hear many WYSIWYG web designers screaming, “NO!! Not HAND-CODING!!!” While Dreamweaver is great at visually creating table-based layouts, CSS requires a bit more hand coding… ok, a LOT more hand coding. But the rewards of learning this layout method are far greater than the drawbacks. Easy to manage sites, better search engine optimization, faster loading pages and more accessibility are just a few reasons you should be designing with CSS.

Anyone can jump into this book without any knowledge of CSS and learn quickly (putting all fears aside), but a little knowledge of HTML, XHTML and CSS will certainly help in grasping the key concepts outlined.

The author starts off defining IDs, class names, divs, spans, doctypes, validation and browser modes in easy to understand language (keeping the geek-talk to a minimum). He then discusses specificity and the cascade, selectors, and the best way to plan, organize and maintain your style sheets. Andy also teaches us how to import style sheets, allowing you to have separate style sheets for forms, typography, color, layout, etc., which can be helpful if your style sheet is getting out of control.

Personal Experience

Last year I had the opportunity to work on a set of large content-managed websites (www.essure.com and www.essuremd.com) with a team of programmers in San Francisco. The opportunity afforded me a chance to hone my skills at CSS. Until then, I only used CSS as a way to style certain elements (p, h1, h2, td, etc.) using classes, but this project required translating Photoshop layouts into completely table-less CSS based layouts. The experience was great, and led me to purchase CSS Mastery to further my CSS education.

Here’s an example of a frequent CSS mistake I’m sure many designers are guilty of. In the past, I might have marked up a div like this:

<div class=”content”>
<h1 class=”largeBold”>Lorem ipsum dolor</h1>
<p class =”contentP”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
</div>

…with the following CSS:

.content
{
width: 400px;
color: #000000;
}

.largeBold
{
font-size: 15px;
font-weight: normal;
}

.contentP
{
font-size: 12px;
font-weight: normal;
}

Notice how I’ve assigned classes to each element of the div, including the div itself. One of the main reasons to use CSS is clean, lean code. My markup was kind of meaningful, but not as good as it could be.

Using tips from the book, the following is a better way to structure the div, letting the cascade to the work:

<div id=”content”>
<h1 >Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
</div>

…with the following CSS:

#content
{
width: 400px;
color: #000000;
}

#content h1
{
font-size: 15px;
font-weight: normal;
}

#content p
{
font-size: 12px;
font-weight: normal;
}

What exactly is the difference you ask? Without the extra classes added to the code we have clean and meaningful markup. What I did was target specific elements in the div marked #content, letting the CSS and the cascade do the work instead of the HTML markup.

On with the Review

The next chapter deals with three of the most important CSS concepts to understand: floating, positioning and the box model. This chapter is probably the most difficult to wrap your head around, especially if you are new to CSS. After you start developing and need to troubleshoot aspects of your layout, this is a great chapter to refer to (as well as the bug hunting chapter, discussed below). The section on margin collapsing is especially useful, as this is a frequent “bug” that people run into when using CSS for page layout.

Chapter 3 is all about using background images, a key concept in page layout. You learn how to make fixed-width and flexible rounded-corner boxes that expand when new text is added or the font is enlarged. Easy-to-implement CSS drop shadows and image replacement techniques for text are nice tricks to have in your arsenal as well.

Chapters 4 and 5 teach various ways to style links and create horizontal and vertical navigation bars. Did you know you can create an entire site navigation based on an unordered list? Chapter 5 shows you how to create navigation bars that use text links styled with background and rollover images to create a graphic-rich text based navigation, perfect for being found by the search engines.

Chapter 6 and 7 go into styling of forms, data tables (the only place tables should be used in a layout, according to the author) and what you’ve all been waiting for, page layout. The author discusses 2- and 3-column fixed width, liquid and elastic layouts, as well as centering a design on the page and using faux columns.

Chapters 8 and 9 deal with hacks and filters, and troubleshooting bugs in your layouts. Specific bug hunting tips include problems with specificity and margin collapsing. Bug hunting basics are discussed, as well as common bugs and easy to implement fixes.

The final two chapters are written by Collison and Moll respectively, and give detailed case studies for two CSS based websites. Virtually every tip, trick, hack and bug fix are explored in real-time in these chapters, and the reader gets to virtually look over the shoulder of two top-notch CSS developers.

As an added bonus, you can go to the publishers website and download the source code and files for all of the examples in the book. This makes a great library to pull from when you are developing CSS layouts.

I would recommend CSS Mastery to anyone who is a self-taught CSS developer. The most important skill I have learned in this book is how to make my CSS based websites compatible across browsers and operating systems without the use of extensive hacks and filters. As any self-taught CSS designer knows, cross-browser support of CSS is sketchy, and there are tons of hacks you have to use to get the site to look good in all browsers. While the book does not teach you how to build sites without any hacks at all, it helps to keep them to a minimum, making the task of CSS development a lot less frustrating and a lot more fun.

Comments

Leave a Reply