One of the biggest issues people have when modifying the way their websites look is finding which styles are being used and where those styles are defined.  Cascading CSS styles are very powerful for allowing overriding of styles in different locations, but can make understanding how a site works for others very difficult.

Luckily, there are some wonderful tools out there to help.  Once you use one of these tools, you will never look back.

Firebug for Firefox

There is a wonderful add-on tool out for Firefox called Firebug:

http://getfirebug.com/

Once installed, you can open it by clicking the little bug in the bottom right corner of the browser.  Once it is open, you can click the inspect button in the top-left corner of Firebug (square with an arrow pointing at it) and then move your mouse around your HTML page to highlight the item that interests you.  When you click the item, the associated HTML and CSS will show up in Firebug below.  You can right click most of the information to edit, copy links, open in another tab, etc.

Chrome's Inspect Element

The Inspect Element functionality comes built into Chrome and works similarly to Firebug.  Just right click the element you want to inspect and all the HTML and CSS will show up in the window below.

Internet Explorer 8's Developer Tools

Internet Explorer 8 also has Developer Tools which work similarly to the other two mentioned above.  You can open Developer Tools by going to the Tools menu or using the F12 keyboard shortcut.

This Is Great!  Is There More?

Being able to quickly look at the HTML and CSS that your browsers are using will massively speed up your development and design time.  This alone would be enough to make you never go without these tools in the future...but there IS more!!

If you look around in a few of these tools, you will find support for javascript debugging, code validation, profiling, and much, much, more!  I'm still discovering new features in each of these tools that I was not aware of and that make my life as a developer easier.  Now that I've been spoiled by using these tools to help me with my development, I would never want to go without them.

One of the most powerful features is that in the CSS pane on the right, changes you make will affect the page that's showing.  So instead of updating a CSS file, uploading it to the server, and reloading the page, now you can test your change first and then make it permanent.  It's a huge timesaver, and has helped to de-mystify how many different style's actually work by seeing immediate before/after effects.

These are all great tools to use on your own site, but if you're trying to learn more about design and development, the real fun begins when you inspect other pages to see how they achieve some amazing effects.