Tools you need
- Firebug installed in the browser(firefox)
- any page consist of xhtml and designed with CSS open in the browser
Firebug icon in the browser:
After installing the firebug you can see there is one icon look like firebug in the bottom right corner of your browser. To open and close the firebug you can click that button. Here is the screen shot.
Inspecting the CSS in firebug:
Here comes the interesting part of the CSS development. After clicking in the firebug button a new small window will comes up at the bottom of the browser. Just like the screen shot.
Left upper corner of the firebug screen there are three button. First one is all about firebug which is a firebug button. Second one is inspecting button with a small cursor. If you click that button and mouse over anything in the page then the whole xhtml or html structure will e displayed in the mini window of firebug which is just after the firebug window navigation bar. Assume you want see the CSS of any website’s or your web page’s heading pictures and CSS for your header.html which you include in the main file and visible when you open the index.html file. Just open the file you want to look up through firebug and open the firebug by clicking firbug button and then click the inspect button. Mouse over in the main browser page what you want to inspect. click to stick with that specific div or table to look after the structure carefully and to change it in the firebug window. Now come and look at the firebug window. You can see the xhtml structure in the left and CSS in the right, What you mouse over and clicked in the main browser page. here are some screen shots to make it clear.