CSS Mastery: Advanced Web Standards Solutions

by Andy Budd with Cameron Moll & Simon Collison

This was the first CSS book that I purchased. I was always hesitant to purchase a book on CSS because most of the resources that I’ve found have been mostly beginner’s tutorials or instruction and I felt that I had at least a “beyond beginner’s” understanding of CSS. I wouldn’t go as far as saying I’m an expert at CSS, but at least mid-level to advanced. However, this book had some previous good recommendations from amazon.com so I bit the bullet and bought it. I must say that I was NOT disappointed!

This book starts off with a very quick introduction/recap of CSS basics including good code structure and organization, validation, DOCTYPES, common selectors including IDs and classes, pseudo-classes, and the advanced selectors such as universal, child, attribute and more, and some wonderful reference on the specificity and inheritance, or the “Cascade”, the core of CSS. Although this introduction is provided, it is relatively short at about 25 pages and I would suggest a good working understanding of these basics first, as it will help understand the rest of the book easier as opposed to trying to learn CSS for the first time from this book. The following chapter is another quick 15 pages with on “Visual Formatting Model Recap” including the Box Model and Positioning, two EXTREMELY important concepts to understand CSS properly. Although it is short, it is an extremely powerful section.

Chapter 3 finally jumps head first into the code with “Background Images and Image Replacement.” With the movement towards “Web 2.0″ websites, one of the most common features you’ll see in these websites is rounded corners. These can be difficult to achieve successfully and the authors make it very easy. This chapter also touches on different drop shadows and image replacement techniques, which are useful for placing a logo in place but still having the text remain search engine friendly. Chapter 4 is a fairly short chapter on “Styling Links” with some interesting uses of attribute selectors.

Chapter 5 is all about “Stylig Lists and Creating Nav Bars” including the popular “Sliding Doors” popularized by Douglas Bowman of Stopdesign and first published in October of 2003 in A List Apart online magazine. During the section on creating nav bars, this chapter shows how to use CSS sprites for rollovers and visited links, something which I’ll be blogging about soon. Chapter 5 also shows how you can use CSS to create image maps, something I’ve never even thought of doing with CSS.

The next two chapters are two of the best in the book I think. Chapter 6 deals with “Styling Forms and Data Tables”, while Chapter 7 tackles “Layout”. I think that styling forms properly can be one of the most difficult things to do in a website Chapter 6 shows some good tips and tricks to handle this properly. After all the chapters on styling elements, comes the final code chapter which deals with Layout and shows how to center designs, create two and three column layouts, and liquid, elastic, and hybrid (elastic-liquid), or fluid, layouts.

As any web designer knows, IE doesn’t do the best job of displaying HTML and CSS properly according to the W3C. Fortunately, the last two chapters in the book are about “Hacks and Filters” and “Bugs and Bug Fixing”, two excellent chapters for dealing with the countless IE CSS bugs. Finally, the last two chapters of the book are Case Studies that put everything together and take you through building two different web sites in a Web Standards way with CSS.

Overall, this is an excellent book, one I’d highly recommend to any web designer, or CSS developer, looking to expand their knowledge of the powerful language that is CSS. Definitely worth adding to your library. On an additional note, this book is published by Friends of Ed, a fantastic publisher of technical books, and one of my favorites. I currently own 8 books published by “Friends of Ed” and 2 more from their parent company Apress, all of which are excellent books.

Paperback: 280 pages
Publisher: friends of ED (February 13, 2006)
Language: English
ISBN-10: 1590596145
ISBN-13: 978-1590596142

Standards based design is web site design that follows and conforms to current web standards recommendations, as set by the W3C. According to their website, the W3C’s mission is:

To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

Some people may ask, why are web standards important? Same reason any set of standards are important: To promote continuity and uniformity. Think of all the standards in place in the world today: Standard Units of Weight and Measurement, Street sign colors/shapes, building/construction code, and even our state/local laws are all systems of standards. Without systems of standards, people would be free to do things as they wish. Ultimately, it would result in utter chaos. Unfortunately, that’s what happened back in the days of the browser wars in the mid-to-late 90’s.

Those of you who are fortunate (or unfortunate) enough to remember, know what I’m talking about. Different browser manufacturer’s did things their own way when it came to displaying web pages as web standards had not been published or were not widely known. Now, things are still far from perfect when it comes to browser support for HTML/CSS standards, but they are definitely better than they used to be. Browser manufacturers are getting better at their support for current design standards and W3C recommendations. A W3C Recommendation is the name for a current internet language standard and guideline, and over 110 recommendations have been published since 1994.

So, why standards based design? Simple. Standards based design provides a number of benefits not only to designers, but also to users.

• Insure that web pages will display in the way that the designer intended regardless of browser.

• For instance, when I was designing my site, I was only able to view my website in Firefox 2.0 and Internet Explorer 7. Now, I can check sites in IE5.5, IE6, Safari, and Opera browsers on my computer. However, because I used standard based code, when I was able to view my site in all these additional browsers, it displays just fine without error.

• Web sites are easier to update.

• By keeping your style and structure markup separate, it makes it easier to edit/change styles in one place than searching for inline style references or <font> tags in your code

• When it comes to search engines, content is king!

• Search engines index you based on content, not fancy layouts, colors, and design. By utilizing standards based design, you are insuring that search engines see strictly your content without any non-semantic code added in. Using CSS, you can replace the text of an <h1></h1> tag with an image that contains a fancier typeface, but the text is still in the <h1></h1> tag and that’s what the search engines will see (more articles about SEO tips can be found in our SEO articles category).

• Standards based design promotes web site accessibility

• Using only semantic standards based code will help to maintain usability and accessibility to your site for non-visual users and mobile devices. Not everyone who uses the internet is a visual user (some are blind), and not everyone uses a computer (blackberry, treo, iphone, etc). Not all these devices have full css support and allow users to still view your sites properly. Blind users also use a device called a screen-reader that literally reads the site content to the user. Some of these screen reader technologies will place different inflections for different tags like <strong></strong>, <em></em>, and header tags.

• Web sites are forward compatible for new browser updates and backwards compatible for legacy browsers

• This one is pretty self-explanatory. Generally, standards based web sites will still display as intended in future browser updates, and will display as intended in older legacy browsers. The reason I say generally is because all browsers, especially older browsers such as IE6 and before and early versions of Netscape, have their quirks. For instance, IE6 and before don’t support CSS adjacent-sibling selectors, child selectors, and attribute selectors, among others, even though they’re all part of the CSS 2 Recommendation and they support other CSS 2 selectors. Because of these quirks, many designers used non-standard hacks, filters, and work-arounds to get around these quirks in IE6. Because of IE7’s increased CSS and standards support, many of these sites broke when viewed in IE7. If they were using standards based code for IE6, they would’ve displayed just fine when viewed in the newer IE7. Instead, these designers had the fun task of fixing all the invalid code to make it display properly in IE7, and then making it backwards compatible to IE6. Most of these designers ended up using propietary IE conditional comments, which are not part of the current W3C HTML Recommendation.

Obviously there are a lot more benefits to using standards based design, too many to list here. For further reading, I recommend the following books I’ve read for designing with Web Standards using HTML/XHTML, CSS, and DOM Scripting:

• Web Standards Solutions: The Markup and Style Handbook – Dan Cederholm
• CSS Mastery: Advanced Web Standards Solutions – Andy Budd, Simon Collison, Cameron Moll
• Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting – Andy Budd, Andy Clarke, Ian Lloyd, Cameron Adams, Rob Weychert, Ethan Marcotte, Dan Rubin, Jeff Croft, Mark Boulton, Simon Collison, Derek Featherstone
• DOM Scripting: Web Design with JavaScript and the Document Object Model – Jeremy Keith

There are plenty of other quality books out there written by excellent writers and web standards proponents including Jeffrey Zeldman, Molly Holzschlag, Dave Shea, and more.

By this time you may be asking yourself what this has to do with getting naked. In 2006, Google Developer and author Dustin Diaz came up with the idea for CSS Naked Day in which web designers and developers “strip” their websites of all CSS code leaving only the un-styled HTML code underneath. CSS Naked Day was started in order to promote standards based design, accessibility, and to display web sites in all their unstyled glory. By turning off CSS, users (and designers) will see web sites in the ways that search engines see them, as well as users who are using assistive technologies such as screen readers. CSS Naked Day is a great way to help promote web standards based design as well as using semantic markup and keeping structure and style separate.

I first heard about CSS Naked Day in Andy Clarke’s book Transcending CSS: The Fine Art of Web Design and as a proponent of web standards, I thought it was a great idea and decided to participate. This year, CSS Naked Day will be observed on April 9th according to the XHTML.com site and Dustin Diaz’s Naked ‘08 post. So, don’t be shocked if you show up to our site on the 9th-10th and see no styles at all (CSS Naked day is observed for one international day, or 48 hours).