Pro CSS Techniques

As a developer, I’ve had to endure my fair share of designers lecturing on the virtues of Cascading Style Sheets (CSS) and maintaining a strict divide between content elements and their visual layout.  It’s a noble pursuit, but for a developer with little design experience the task of getting a page to look just the way you want using CSS can be a difficult and frustrating undertaking that quickly regresses back to the form I know best:  using table after table for layouts and haphazardly slapping style strings into various elements until the page comes out looking right.  In other words, the approach designers hate.
Instead of abiding in my ignorance of CSS, I decided to pick up a copy of Pro CSS Techniques by Jeff Croft, Ian Lloyd, and Dan Rubin.  It’s an intermediate to advanced-level book on CSS that assumes you have some basic knowledge of CSS.  If you feel comfortable using styles directly in your HTML, then you’ll be comfortable reading through this book.  The authors did a great job of covering the basics enough to inform you if you need it, but not dwelling on it to the point of boredom if you do not.  They also did a great job of explaining the “how” and “why” behind some of the most confusing aspects of CSS, which is why I definitely recommend picking up a copy.

Pro CSS Techniques starts out with a great introduction to Semantic HTML, the concept that HTML should only define what is on the page, not what it should look like.  It also discusses why you need to write Semantic HTML if you want to use CSS effectively.  After understanding this concept in more detail, I understand why I ran into so many walls trying to use CSS to style my pages:  I was fighting an uphill battle against the layout and style information that was already in my HTML document. 
After outlining some of the theory behind CSS, the authors discuss the CSS language and syntax.  If you are novice with CSS, this will bring you up to speed very quickly.  The section discussing CSS selectors was invaluable.  I’ve read a number of online tutorials for CSS and none of them ever got into the detail offered by this book.  And if you’ve ever wondered about the “Cascading” part of Cascading Style Sheets, then you’ll find a complete overview about the intricacies of that as well.

You will also find an entire chapter containing valuable information on how the various browsers handle CSS and how to get your pages looking consistent across those browsers without hacks.  And when a traditional approach won’t work, you can turn to the chapter entirely dedicated to CSS Hacks that discusses what they are, what they do, when to use them, when to avoid them, and how to use them in your CSS.
As you work with CSS, you can use the book as a guide because it breaks out common tasks into individual chapters.  You can easily thumb through to the applicable section as you build the layout, create common page elements (headers, footers, navigation, breadcrumbs, sidebars, etc), style text, tables, forms, and lists.  I remember the first time I saw a bulleted list turned into a graphical menu and I attributed it to dark magic.  Now I know how it was really done.

And let’s not forget my favorite chapter, “Everything Falls Apart”, which describes most of my experience with CSS up to now.  It covers what to do when things aren’t working, and their solutions are much more elegant than returning to nested table layouts and forgoing the principals of CSS.

I usually like to know what’s in a book, so there’s a chapter listing in case you’re curious:

  • Chapter 1 – The Promise of CSS
  • Chapter 2 – The Language of Style Sheets
  • Chapter 3 – Specificity and the Cascade
  • Chapter 4 – The Browsers
  • Chapter 5 – Managing CSS Files
  • Chapter 6 – Hacks and Workarounds
  • Chapter 7 – CSS Layouts
  • Chapter 8 – Creating Common Page Elements
  • Chapter 9 – Typography
  • Chapter 10 – Styling Tables
  • Chapter 11 – Styling Forms
  • Chapter 12 – Styling Lists
  • Chapter 13 – Styling for Print and Other Media
  • Chapter 14 – Everything Falls Apart
  • Appendix A – CSS Reference
  • Appendix B – CSS Specificity Chart
  • Appendix C – Browser Grading Chart

All in all, I would highly recommend this book if you have a bit of experience with CSS and really want to solidify your understanding of the technology.  It also does well as a reference book, so once you’ve got the concepts down, I would still keep it close to your computer.