I recently had to debug some css / html templates, I was having trouble figuring out why the design did not render as intended. There were so many nested CSS classes it was hard determining what class had precedence.
The Firebug extension for Firefox made this task so easy I wish I had installed it long ago. After installing it, click on the red or green icon in the bottom Firefox status bar. This brings up the interface to Firebug, click inspect, and then click on the portion of the web page you want to inspect. Firebug highlights the html and related CSS code for you to inspect.
