Web Developer Extension: I don’t remember where I heard about this one, but it’s a peach of an extension. We’ve talked about the Web Developer extension for Mozilla and FireFox before, but the latest version comes with the sweetest sidebar you could ever imagine…
You can open the stylesheet for the current page in a sidebar, make changes to the CSS, and the page changes in real time.
You cannot believe how handy this is. Play all you like, and watch your changes happen, then just copy all the CSS and paste it into the actual stylesheet (or you can save directly from the sidebar). If the page has inline styles, they open in the sidebar too under a different tab.
Add Web Developer’s ability to display the CLASS and ID of every element on the page, and you never have to touch the HTML to re-do the style. Just fiddle with the CSS in the sidebar, and if you ever need to figure out how to “get at” something, just display the CLASSes and IDs for a second, then hide them again.
If you need to figure out how the spacing on the page works out, just add a quick CSS rule to outline all the DIVs in, say, green. Or use Web Developer to outline them.
This is as close to CSS heaven as I’ve come.