1. Once you have installed Firebug (http://getfirebug.com/), open the website in Firefox, then go to the tools menu> Firebug> Open Firebug. It will open a split window on the bottom of the Firefox window revealing the code on your page.

 

2. Now you can "INSPECT" the code that you want to understand. This lets you see how the code behaves on your page. On the Firebug menu click "Inspect"(A). Then click the portion of the page you want to see the corresponding code for. In this example I clicked Gary's menu button. Now you will see the CSS Code that corresponds just to the buttons on his webpage in the panel on the right (C).

 

 

3. You can have fun with this. Now click anywhere to the left of the CSS line of code. It will insert a crossed out circle symbol (like in Ghostbusters - yea dated reference, I know) and hide the CSS code as well as it's influence on your webpage. So in this example, you no longer see the buttons on Gary's page.

 

 

 

 

 

4. Take it one step further and actually make edits on the fly. In this example I changed the background: image from img02 to img03 right in the Firebug editor. And I made the border left: attribute from 2px to 200px and you see how it would look on the webpage. JUST REMEMBER, these changes only affect how the browser window reads the webpage that is already loaded. Therefore temporary and not permanent. If you want to keep these changes you have to remember what you did and open the .CSS file in dreamweaver and permanently apply the changes by making them in the file, saving and uploading to the server.

Cool.