Monday, April 20, 2009

Firbug: To Learn and edit CSS easily

Have you ever faced this scenario?

You are browsing for website designs and came across many with amazing designs, and with look and feel you would like to have for your site. You refresh your CSS knowledge and break your head in imitating similar kind of design. You may spent days and nights experimenting, to achieve similar kind of design.

Firebug marks an end for such long experimenting and designing on CSS. Now you can view and change the CSS locally for your favorite websites and you can even copy paste the styles.

Firebug is a Mozilla Firefox plugin which looks at the underling CSS, HTML, and Javascript structure and shows you where in the code individual elements are. It finds the HTML elements buried deep in the page very easily and also lets you edit the HTML live. Suppose you came across a website and you would like to see the same website in a different background color, you can easily edit the back ground color by going into your firebug tool. Within seconds you will see the website updated with new color. Don't worry, it is just a local editing, it will not change the look and feel of the actual site.

All you need to do is:
1)
Install Firebug using your mozilla firefox.
2) Go to the website you wanna see the underling design.
3) Select Firebug from Tools in your firefox browser.(Or click on the 'bug' icon at the bottom right corner of your browser. You will see a window opened at the bottom of your browser.






4) Enjoy learning and editing the website design through CSS files!

Listen to Joe's video here


No comments:

Post a Comment