CSS Sniffer

CSS Sniffer is a tool to help determine how styles are being applied to elements. Have you ever had to figure out why an element was the color it was? Digging through a mountain of stylesheets, selectors, rules, elements, class names, attributes and inline styles to find out what is being applied where is no fun at all. CSS Sniffer makes that task it easy.

For example, you can for this page. (If nothing happens, try it using Internet Explorer.) Simply click the button above (you might need to disable pop-up blobkers first), then move your mouse around the page and click the desired element. If you have a big enough screen, you can see the different styles as the mouse moves while sniffing.

Try using it to figure out why each of the bold words on this page is bold.

CSS Sniffer can be used to diagnose just about any web site (yet there is nothing to install!). By using a "javascript favorites" link, you can reveal the style path of almost any web page. To create the favorite, right-click on this link Foundation CSS Sniffer and choose "Add to Favorites".

That's it. Now you can sniff CSS simply by chosing the favorite while browsing your favorite sites.