Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Possible Duplicate:
Refactoring large/old CSS files

Wondering if anyone knows of a product that would help you to "see" all the css styles currently defined on a page.

For example... Say I'm working on a page and want to create a "leader" css value as a class for a span to make wrap around the first few words of a paragraph to make them bold.

I could do something like...

.leader { font-weight:bold; }

and then...

<p><span class="leader">Four score and seven years ago</span> our Fathers...</p>

I may create this w/out realizing a class called "leadertext" was already defined in a stylesheet on the page. Without either having knowledge of it, or scanning through all the CSS I have I don't know of a way to know what's already set.

Curious if there's some silver bullet I don't know about.

share|improve this question
    
My answer to the above question lists a number of tools which do what you're asking, but @Antonio is correct that firebug will quickly show you what the active styles are on a given tag. –  toomanyairmiles May 17 '12 at 8:45
    
almost every major browser vendor provide out-of-the-box development tools. hit F12 while viewing the page. Chrome's is my personal favorite. –  Eliran Malka May 17 '12 at 9:49
add comment

marked as duplicate by toomanyairmiles, John Conde May 17 '12 at 11:32

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2 Answers

Use Firebug, look at the html tab and there you will have css rules for current markup element, here is a screenshot :

enter image description here

share|improve this answer
1  
Since I don't want to steal the thunder from Antonio (Very good answer), you could also use Bookmarklets... even though they seem to have been forgotten. Use this page for a good display of what is out there right now, a number of bookmarklets will display CSS properties (Including class/id, etc). Unrelated: The 'Edit Any Website' bookmarklet is awesome! –  Christopher May 17 '12 at 10:30
    
nice list, thanks –  Antonio Bakula May 17 '12 at 10:46
add comment

Automatic CSS documentation tools such as KSS and css_doc will examine a stylesheet and produce documentation for it that you can use as a styleguide to avoid recreating existing styles.

KSS, for example, takes a stylesheet formatted to a certain convention and produces a "living styleguide" that looks like this:

KSS styleguide screenshot

The concept is very much like phpDocumentor for PHP and Rdoc for Ruby, but for CSS instead.

The downside is that your stylesheet has to have been formatted using KSS comment conventions, so it won't help for regular stylesheets. Still, it's worth knowing about for future projects, especially if you're collaborating with a team.

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.