Editing HTML and CSS
In a typical scenario of editing a page, you open the page in an editor, make changes in it, and then reload the web page to see the changes. If there is something wrong, or anything is not as desired, you go back to the editor and repeat the cycle.
Well, there's no need for this anymore when you have the power of Firebug. This recipe will explain how you can edit the HTML and CSS of a page or specific elements in real time using Firebug. Once all the changes are made you can implement those into your source code at once.
How to do it...
Take any recipe from this book. For example Creating an accordion style menu from Chapter 7 and open it in the browser.
Now using the Inspect button locate the
h1element on the page, which has jQuery written inside it. Click on the Edit button beneath the Inspect button and you will be able to edit the HTML of theh1element. Change the text inside it to About jQuery.Now click on the DIV with class
container. On the right panel you will see the container class and its CSS properties. You can edit its existing properties by clicking on the property values and then change them to the required values. For example, click on the value forbackground-colorand change it from#F0F8FFto#ff0000. All elements with classcontainerwill now have a red background colour.To add a new property, right-click on that class name and select New Property. It will append a new line to the existing properties where you can add new properties and their values. Add two new properties
colorandfont-weightwith values#fffandboldrespectively. This change will be reflected in all elements with classcontainer.
There's more...
Changing style for a specific element
Apart from changing CSS for already defined classes, you can also specify CSS properties for individual elements. For this, right-click anywhere on the right panel and select Edit Element Style option. This will append a new row in the right-hand column for adding CSS name values that will be applicable to only the selected element.
