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?
 
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).
0
 
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?
0
 
enkorCommented:
tools for browsers - usually by pressing F12:
IE: included developer tools
CHrome: included developer tools
FF: FireBug (need to be installed separately)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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).
0
 
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!!!!
0
 
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
0
 
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.