Firebug CSS Getting Started Easy and Visually

July 16, 2012 | By Duchateaux.

This Short Visual-Tutorial is meant to Getting-Started Easily on Firebug for Firefox Addon.

The Steps Describe here are the Most Useful and Frequents Actions Involved in CSS Editing by Firebug.

And this Visual Guide includes the Basic Screenshots of the Steps Involved.

The Contents and Details are Expressly Essentials to Give Focus Only to the Essentials Instructions and Commands and Make Tut more Easy-Digestive;)

To the Article-Bottom you will Find a Link to Article with Tip for Saving CSS Changes Made during Firebug Testing.

Firebug-Rocket
  • Inspect an Element by Firebug

    Hover an Element > Right-Click > Select Inspect with Firebug.

    Inspect Element by Firebug

  • Edit/Change a CSS Property

    1. To the Right Style Tab Selected

    2. Click on the Property Name to Change

    3. Click on the CSS Value to Change

    Inspect Element by Firebug

  • Insert New CSS Property

    1. Hover the Empty Area to the Right of Properties

    2. Double-Click

    3. Insert New Property Name

    4. Hit Tab

    5. Insert New CSS Value

    Inspect Element by Firebug

  • De-Activate and Re-Activate a CSS Property

    • De-Activating: Hover Left and Click on Barred Sign

    • Re-Activating: Hover Left and Click on Grayed-Barred Sign

    Inspect Element by Firebug

Extra Indications:
HOW2 Save HTML and CSS Changes Made by Firebug

QuickChic Theme • Powered by WordPress