Whether you’re a veteran web developer or just tweaking your own Blog templates, there comes a time where the “save and reload” cycle of Cascading StyleSheets (CSS) gets really obnoxious. That’s where you change a style, save/publish it, reload the web page to see whether it worked, rinse and repeat. Ad nauseum.

If you haven’t already discovered the gem of a browser plugin called the Web Developer Extension, you’re in for a treat. It works in Firefox, Mozilla, Flock, and Seamonkey, and among many other things lets you play around with CSS and instantly see the changes reflected in a web page.

Once you install the extension, you’ll get a toolbar in your browser window with a number of drop-down menus that let you do everything from cookie manipulation to window resizing to form testing. The image above shows a partial view of the menus available.

To use the Edit CSS capability on any webpage, simply click the “CSS” menu and choose “Edit CSS”. A new pane will open up in your browser window with all of the stylesheets for the page. Pick a style and edit it…. as soon as you start typing, the webpage will reflect the changes.

For example, here is a screenshot where I changed the background and border colors for the main TechBrew layout. The relevant lines are highlighted in the CSS editor on the left, and you can immediately see the results on the right:

The changes are only in your browser, of course, so you can experiment to your heart’s content. If you look carefully at the editor pane, you’ll see a disk icon that lets you save the altered stylesheet to your local machine as well. Cut-and-paste can also get the job done.

This is, of course, only the tip of the iceberg for the Web Developer Extension, but the CSS Editor is the crown jewel of the plugin. I think you’ll find — as many of my colleagues have — that it quickly becomes an indispensible tool in your bag of tricks.
Happy styling.