Using Firebug for CSS (video)

Hello everybody,

Today I would like to show you how to use firebug to help you out when writing CSS.

This time I made a video since I thought it would be easier to understand ones you see the action happening. In the video you will see that I'm using an image of a layout with measurements that I would like to create by using CSS and the help of firebug

I used a simple style-sheet with some errors in it and a simple mark-up. Now to solve css errors all I need to do is right click -> "inspect element" on an element in the browser and firebug will open up a window.

At the left side of that window you will see the mark up used. And at the right side you will see the style that is applied.

By clicking on an element in that window (left side) you can adjust the css at the right side by just double clicking on the style and adding your own. Notice that by hovering over the elements (left side) it shows blueish squares marking the elements. This gives some visual reference.

Also styles that are overwritten either by inline style or by style declarations further down your style sheet are given a strike through. (if you see that a lot, your code is very likely redundant)

Ones everything looks great just copy paste the style from firebug and insert that into your original style-sheet.

So to sum up the standard procedure: Open up the browser, right click on the element you want to change, and choose "inspect element", Select at the left side of the firebug window the element, and adjust the style at the right side by just double clicking and adding what ever style you want. Copy the style ones you  are done and paste it in your style-sheet. (note: the changes will disappear ones you refresh the page)
WATCH IT IN FULL SCREEN

WATCH IT IN FULL SCREEN
I hope you enjoyed the video. In the end using firebug or any program is all about trying it out.

Cheers!

Cssfreakie

P.s. this tutorial assumes you have installed firebug for firefox and are familiar with classes and id's or css in general