How can I see which styles in my stylesheet are actually being applied to the current page?

Question

Are there any tools or browser plugins that allow me to see all styles in a stylesheet that are currently active/used on a page?

Short backstory: I inherited a giant stylesheet from the previous UI designer. It used to be applied to every page on the site. Later the entire site styling was redone except for the landing page. So now I have two giant stylesheets, one for the landing page, and one for everything else. I'd like to merge only the relevant parts of one into the other. If there's a better way of doing that than what I'm proposing, I'm certainly open to other solutions.

Thanks.

Answer 1

Use the Firebug Plugin for Firefox or the Web Developer Toolbar.

Answer 2

Have a look at the Dust-Me Selectors Firefox plugin.

Answer 3

Use the Web Developer Toolbar for firefox. The CSS tool can save you lots of time !