Firefox CSS Style Rules
The IE DevToolbar has a nice DOM model viewer but the tool that comes with Firefox one's it up - a video about CSS development/debugging:
[camtasia:FireFoxDOMTools:450:400]
In the above video, I discuss the DOM Viewer in the IE DevTollBar and show a feature available through the Firefox DOM Inspector (comes with Firefox but you must choose to install it).
In IE, once you bring up the DOM Viewer, you can select Find->Select Element by Click which then causes all of the HTML page elements to highlight as you mouse over them. Click on the element brings up all the CSS details in the Current Style section of the viewer. You can easily add rules to your CSS and see how your layout is changed right away by clicking the [+] key in the attributes panel. This is a really nice CSS debugging tool.
Firefox also has a Select Element by Click but it doesn't seem to work as nicely as in IE in that you don't get the mouse-over highlight. You can still find your elements easily in the tree-view. Where Firefox goes beyond the IE DevToolBar is in the ability to view "CSS Style Rules." So, in Firefox, you must first load the DOM Inspector by clicking on Tools->DOM Inspector or Shift+Ctrl+I. The Inspector will load and the current URL defaults into the window. You may change the URL if you'd like. Click the [Inspect] button. At the bottom of the Inspector, the page will load. Select Search->Select Element by Click and select an element on the page. All of the CSS details will be displayed. Now the piece de resistance: In the top-right panel of the Inspector you should find, by default, the DOM Node. You can change this panel to view the CSS Style Rules for the selected element by clicking on the down-arrow in the menu bar to the left of the title:
Select this option to load this tool and you'll see the hierarchy of CSS files and rules affecting the selected element including the browser default styles. This is a GREAT tool for debugging CSS issues.