Painting the Web

CSS Tools and Utilities

CSS isn't as complicated as a markup like XHTML, and a lot of CSS files are manually created. However, there are tools to help with CSS, including tools to create, to validate, to format, or to snoop.

Yes, snooping. Snooping is not only respectable when it comes to CSS, but it's also how most of us learn how to apply CSS to create effects. Once you're done snooping, you're ready to edit; once you've edited, it's time to format; and, finally, you need to validate.

Snooping CSS Through Firefox and the Web Developer Toolkit

There are toolkits and extensions to snoop through CSS in most of the primary browsers, but none more than with Firefox. My favorite of the browser-based CSS tools is Web Developer.

Tip

The Web Developer Firefox extension can be accessed at http://chrispederick.com/work/web-developer/.

Once installed, this tool provides options for everything: validation, editing the HTML, magnifying it, cookies, disabling active page components, even seeing the page source after any client-side manipulation. It probably is the richest web toolkit I've seen and a must for page design and development.

Among the options is a set specific to CSS. Clicking on the top-level menu item labeled CSS provides the following options:

• Disable Styles

  — All Styles

  — Browser Default Styles

  — Embedded Styles

  — Inline Styles

  — Linked Style Sheets

  — Print Styles

  — Individual Style Sheets (leading to a list accessible in the page)

• Display CSS by Media Type

  — Handheld

  — Print

• View CSS

• View Style ...