Editing CSS with Firebug in Windows XP Home

In part  one of the tutorial, we discussed the installation techniques of Firebug showed you how to inspect and edit HTML in real time. In this section, we will delve more deeply into inspecting and editing CSS (HTML styles), which can be done very easily with Firebug.

Firebug helps you save a lot of time, especially with CSS. Without Firebug, a webmaster must open the CSS file, edit a particular line in that file, save it, and finally refresh the page so the reflected changes can be seen. What if your changes are not correct or up to your standards? You then must reopen the CSS file and repeat the whole time-consuming procedure.

With Firebug, all you need to do is inspect the CSS element and make your changes; Firebug will automatically reflect your changes in real time, helping you to judge immediately if the changes you made to the code are correct.

If they are correct, you can then save the correct CSS entry to the original file. This makes the editing process fast and easy.

If you have not read the first part of this series, it is highly recommended that you read it before continuing with this part.

How to Inspect CSS in Firebug

To inspect CSS, you need to follow the inspection procedures with HTML (discussed in the first part) and then hold onto your inspected element. Sometimes it may be hard to detect what particular lines in CSS govern the style of the inspected element, so when Firebug opens up and shows you the CSS editing console, you are free to change those values in a trial-and-error fashion and see which elements affect the changes in real time.

Another user-friendly method, especially for beginners, is to see what class/style a particular HTML element is using. By inspecting both the HTML and CSS element, one can see which particular lines will be edited in the CSS file. Also there are two basic ways in which a web developer can handle style. The first is to embed it directly into the HTML code, and the second is to put it in the CSS file (.css).

Other developers combine these techniques for flexibility and speed. The good thing is that both of these approaches can be inspected and edited easily with Firebug.

For example, suppose I need to edit the style of a text that reads "How does this PHP developer website can help you?" (see screen shot below):

It has been shown that the inspected text is using an H1 tag with the class "widgettitle." On the right is the CSS console, and the affected lines corresponding to this class are encircled in the red box. In addition, on the left (in the HTML console), there is also an embedded style which cannot be found in the CSS console in red:

<h1 class=widgettitle" Style="width: 628px;margin-right: 10px; "> How does this PHP developer website can help you </h1>

If you are developing website for the first time, Firebug lets you see your changes to the style very easily; all you need to do is correctly inspect the CSS element and make test changes.

How to Edit CSS in Firebug

Using Firebug, you can edit CSS in two ways: by making changes in the HTML console, and by making changes in the CSS console. 

It all depends on where the affected lines in the CSS can be found. Again, using a trial-and-error approach will work safely in Firebug. Even if your changes make a mess, they won't damage your website after all, since those changes will not be saved directly to the server.

Let us use our previous example and see what changes need to be made to the CSS file to change the background of the text "How does this PHP developer website can help you" to "black" while change the font color of the text to "white."

Since these are changes to colors, they can obviously be edited in the "widgettitle" class, which is:

.widgettitle {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:#0052A3 url(../../images/feed-title-white.jpg) repeat-x scroll center top;

border:1px solid #CCCCCC;

color:#333333;

font-size:12px;

font-weight:bold;

margin:0;

padding:6px 10px;

The affected lines in this CSS style can be spotted immediately. To change the background color of the text, this line must be changed:

background:#0052A3 url(../../images/feed-title-white.jpg)

To change the font color of the text, this line must be changed:

color:#333333;

It can also be seen that the background is not using an HTML color; it's using an image: (../../images/feed-title-white.jpg)

In order to change the desired background color to "black," use this:

background:#000000;

To change the desired font color to "white," use this:

color:#FFFFFF;

Now how are we going to test these changes in Firebug to see if they indeed give the correct output? We need to move the cursor over the ".widgettitle {" element in the CSS, right click on it and click "Inspect in CSS Tab." You can see the result of doing this in the screen shot below:

The above changes (inside the red box) are incorporated into that CSS style and the background color as well as the font color changes automatically. If the changes are final, we can open the .css file and incorporate the changes into it in order to make this permanent.

Of course, you need to take note of those changes carefully and do not refresh the page while doing the test, or else the changes that you are testing will be gone before you make them permanent by saving them in a .css file.

How to Visualize CSS metrics

Have you thought of changing the width and layout of your web page? For example, you realize that the width of your post content is thin and the sidebar consumes a lot of useless width, cramming your post into a limited area and making it very hard to read. You decide that you need to increase the post width, and at the same time, decrease the width used by the sidebar.

This is a common web development issue that can be solved very easily using Firebug. It is known as "CSS metrics adjustment." The measurement unit used is pixels, making it very easy for you to make an adjustment because it uses a standard means of measurement ("pixels" is the most commonly used measurement in web development)

To get measurement and layout data, the same procedure will apply as in editing HTML and CSS, except you will need to click the "Layout" tab in the CSS Console. To find out where it is, let's have an example.

Suppose I want to measure the width and length of the Google AdSense banner as shown in the screen shot below:

It shows that the dimension of the selected banner (Firebug encloses it inside a blue box) is 466 x 58 pixels. The layout tab is activated (shown in the upper portion of the screen shot) and the dimensions are given.

Using this technique, we can measure any part of the HTML layout that includes tables, border width, padding, etc. All you need to do is mouse over, and then right click to hold on to that measured element.

If we will be changing the width, to avoid distortion, the total width must be preserved:

Mathematically:

Total width = Total post width + Total sidebar width

If the total post width is 660 pixels and the total sidebar width is 278 pixels, the total width covered is: 660 + 278 = 938 pixels

If we are going to widen the post width to 700 pixels, the sidebar width should be 938-700 = 238 pixels.

This can be adjusted by changing both the padding width of the sidebar and the sidebar width itself in order to avoid distortion.

In part three, I will give an actual example of this adjustment.