This morning I attended a “Birds of a Feather” session on Cascading Style Sheets (CSS) at TechEd. BOF sessions can be some of the most interesting at a conference, because they are not the traditional One to Many style of sessions that you normally see. The room is setup with Whiteboards and Flip Charts and the seats are arranged so that the audience is facing each other. The conversation is moderated, but the content and discussions are determined by the audience interest and it can get really interactive. During the session we put together a great list of resources on CSS. I grabbed my laptop and started taking notes, because I thought it would be great to capture all the good information. I can not take credit for putting this together, it was done audience and by our Moderator Cheryl D. Wise (A Microsoft MVP), who runs the By-Expression.com community site and wrote the book on Expression Web. I met Cheryl at the MIX conference last month (we actually shared a cab to the airport and talked standards and accessibility while waiting for our respective flights).
Stunning example of why going to CSS based sites makes business sense
CSS can greatly reduce the payload of your web page (compared to old school <table> and <font> style formatting). I did not realize how much of an impact it can have until Cheryl mentioned two examples. ESPN.com was able to removed 28 servers from their web farm by going to CSS layouts. She also mentioned that a major software vendor told her their bandwidth usage dropped by 40% after going to CSS. Those are real dollars that can be used to justify the cost of the transition.
Top 5 CSS Musts
Is it Content? Content should go in the markup, but formatting and positioning should not.
Use Absolute Positioning with care. When this was originally suggested it was “never use absolute positioning”, but there are a few cases where it is appropriate but you should always question the use of it.
Limit inline styles. Inline styles are when you have the style actually as part of the element. Caution: Many of the older controls in ASP.NET are bad about using inline styles if you use the properties dialog.
Use Inheritance. Inheritance within CSS is one of the harder items to understand (I speak from experience). It is a powerful way to group alike items and dramatically reduces the size and complexity of your CSS.
Use the page structure as much as possible. It is easy to go <div> crazy when you are creating your layout. The example discussed was <div class=”mastehead”><h1>My Title</h1></div> - it is okay (and preferred) to put the styling on the <h1> element and not create the extra <div> just to hold the styling.
Honorable mention - ALT elements on <img> tags. This is very important, but we moved it out of the top 5 because it is required by the HTML specifications and not really a CSS must.
List of sites for CSS
www.csszengarden.com - fantastic example site that shows you what you can do with CSS. Note - this one can be overwhelming to newbies and non-designers.
www.cssplay.co.uk - demos and resources for creating CSS.
www.positioniseverything.net - a site that list many common cross browser issues and solutions to them.
www.alistapart.com - a weekly magazine for web developers.
www.molly.com - Molly E. Holzschlag’s web site. If you ever get the chance, see her present.
www.W3schools.org - general reference site on CSS and many things web.
www.realworldstyle.com - a library of canned CSS layouts and resources.
www.oswd.org - open source web templates.
meyerweb.com/eric/css/ - Eric Meyer’s CSS web site - because it would not be a list without Eric on it.
List of sites for Accessibility
www.section508.gov - official government site on accessibility standards.
www.Webaim.org - Web Accessibility training.
www.w3.org/wai - W3 Web Accessibility Initiative.