I need a CSS tool that will show only CSS lines being used

Anybody know of a tool that can scan a webpage and then show the CSS information that it pulled for that particular page out a long page of CSS.
ZantisAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

crisco96Commented:
Install firefox, after you get firefox go to addons.mozilla.org and install the firebug addon. From firebug you can inspect the page and see all the css that's being used for that page. It even inculdes css that's defined but isn't used (because another style overrides it).

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ZantisAuthor Commented:
I installed firebug, still seem like I don't understand how to see how it is only showing me the lines that it is currently pulling from the CSS though.  I'm basically trying to learn CSS by reverse engineering a site that I like the look of but want to see how the code works.  I've removed a lot of the content but now just want to see what is being used from the original CSS file.  Is there a particular button in the firebug that does this?
enkorCommented:
tools for browsers - usually by pressing F12:
IE: included developer tools
CHrome: included developer tools
FF: FireBug (need to be installed separately)
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

grayeCommented:
I'd recommend using a real HTML editor...  There are quite a few out there, but I prefer Microsoft's Expression Studio Web

http://www.amazon.com/Expression-Studio-4-Web-Professional/dp/B003D1606G/ref=pd_cp_sw_1

It has a CSS "window" that shows how/where each CSS element is being used.  This CSS window can show you the heirarchy of the CSS as it is applied (from external CSS, embedded CSS, and in-line CSS).
AlexSoftware EngineerCommented:
Usage of firefox firebug plugin for your situation:

Right click on the page, go to Inspect element, then from the window that opens choose the last tab saying "CSS Usage" and click Scan. You will see everything you want!!!!
SSupremeCommented:
On the left side you can see selected html elemnt (innerWrap) and on the right side style (CSS) used to style that element.
Capture.JPG
nanharbisonCommented:
If you hit F12 in Chrome, it will show you the CSS and and rules that have been overwritten have a line through them.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.