Here's a pretty easy snippet that places a a colored outline around the border of every element in your CSS code. It makes it easier to debug your code by adding visual representation of errors.

1. * { outline: 2px dotted red }
2. * * { outline: 2px dotted green }
3. * * * { outline: 2px dotted orange }
4. * * * * { outline: 2px dotted blue }
5. * * * * * { outline: 1px solid red }
6. * * * * * * { outline: 1px solid green }
7. * * * * * * * { outline: 1px solid orange }
8. * * * * * * * * { outline: 1px solid blue }

Source

Firebug extension for Firefox is a pretty handy tool for debugging.

The Web Developer Firefox add-on is great for this. It allows to to outline various elements without editing your CSS.

I second the use of Firebug for firefox addons.mozilla.org If you use a Mac CSSEdit is a good mac app for this

'Inspect Element' from context menu in Safari need to check 'Show Develop menu in menu bar' option in preferences.

Im all about web developer and firebug. The firebug console picks up logs as well so if you are running mashlets you can get the readout right in Firebug, makes it easy to find where issues are in web apps.

Check out the w3c.org css validator.

Web developer and Firebug addons for Firefox