Beginning CSS Web Development

Foreword of the Year, 2006 goes to Andy Clarke for getting Logan’s Run and Battlestar Galactica into a book on Cascading Style Sheets. But rather than take a walk down memory lane with Maya I suppose I should start a review of Simon Collison’s “Beginning CSS Web Development” book.

The book is divided into two parts with Colly first introducing the reader to the basics of CSS before moving on to an in-depth look at layouts, usability and accessibility enhancements, tips and troubleshooting and the obligatory (great looking) case study. Chapter 1 — Getting Started soon enters a reasonably meaty discussion on maintaining and organising style sheets that intermediate and even advanced practitioners might also find of interest. We all have our little ways of organising our files and Colly introduces the beginner to multiple directories under that one css folder we normally only ever have (come on admit it!), modular CSS, CSS syntax, commenting and indenting as well as reusing style sheets for other devices. From a teaching perspective it was good to see some best practices being introduced right from the start — page 9 to be precise. The next chapter looks at IDs and classes, how to use the cascade (or not), grouping, inheritence, contextual selectors and CSS measurements (pixels, percent and ems). Again, a good foundation chapter for beginners here — too often we see font-family defined for every heading or a class put on every list item when an id on the <ul> was all that was required. The reader is also informed about grouping similar styles into one rule to achieve nice, compact code. I’m not sure if CSS measurements belonged in chapter 2 but by the end of it a novice would be well-informed on how to organise their style sheets and get the most out of them in as few lines as possible.

After attending Dave Shea’s “Typography for the Web” presentation at @media2006 I enjoyed the recap (as it was for me) concerning text offered in chapter 4 — an increasing area of interest for myself as the font choices are rather limited at the moment. Chapters 5 and 6 cover images and lists respectively, chapter 7 covers links — always, always style a:active and a:focus for keyboard accessibility please and chapter 8 introduces “HTML Element of the Year 2006″: The Definition List. How many times have I used this on projects this year? I’ve found it to be quite versatile but keep a semantic eye on it also.

The very last chapter of part 1 deals with forms. Lovely, lovely forms. When you’ve had to apply accessibility retrospectively to about 10 large forms you’ll understand my pain. Colly dedicates 30-odd pages to teaching novices how to mark them up and style them. I would have preferred to see things like selected="selected" mentioned for select elements and was disappointed by the accesskeys entry under “Accessibility Aids”. Unless user-assigned, accesskeys are a no-no.

Part two is where you really start to roll up your sleeves and have fun. Colly offers some great discussion on floats, clearing and different types of layout before building some basic two and three-column layouts (if you’re pushed for time, you can download the code snippets by the way). Chapter 12 covers contextual selectors e.g. using an ID on the body tag to really gain control of your styles on a per-page basis and reveals the secret behind equal height columns (i.e. faux columns). Some further tips and tricks are offered in chapter 15 and then it’s on to the finale of the case study.

It’s been a great year for people wanting to learn CSS. There’s “Bulletproof Web Design” by Dan Cederholm, “CSS Mastery” by Andy Budd, Cameron Moll and Colly and now this book. This is the penultimate book on CSS I’m buying, after transcending CSS that’s it for me. The topic has been done and done well.

★★★★★ Stars