Screencast Tuesdays: Firebug for CSS Hacking

Our third week of Screencast Tuesdays series, and I thought I’d give you all a treat and cover Firebug. You get most of the same features in Chrome or Safari with their Developer tools. I broke out this screencast to doing just CSS stuff with Firebug and not covering the whole Javascript side of things.

Here’s a direct link to Firebug so you can download it if you haven’t already, Firebug.

Spread the word!

11 Responses

  1. Appreciated the reminder that the CSS “!important” modifier may be necessary when you’re otherwise scratching your head. I often forget to try that. My head hurts a lot. 😉

    Nice intro to Firebug and reassuring confirmation that I’ve been using it in the same ways as other professionals.

    One thing for people to note is that, as well as turning things on/off, values can also be changed/added within Firebug itself. Although just a temporary change (reset upon page refresh,) it can often help you test the effect of a change before committing it in the actual CSS files. Of course, Headway’s Live CSS editor allows for a similar kind of playing around, and once saved becomes impervious to a page refresh like changes made in Firebug. Still, as a sandbox for testing before committing CSS changes to, for instance, the custom.css file, it’s an awesome tool.

  2. AJ, thanks so much. This was very helpful, especially, as Tom said, about using !important. As you know I’ve been struggling with this stuff. I have a hard time knowing which code to use and if it needs a hash mark or period. It looks different in FireBug than the way HT needs it. I’ve started trying to use Chrome’s inspector instead because it displays the element code in the same way I need to add it to HT.

    But I’m gradually starting to understand. I had a young kid come in to help me with it some coding the other day. He took the time to explained to me this way (included for others who are newbies like me):

    The # indicates an ID, which is a CSS element/style that applies to ONE object and there can only be one per page. The . indicates a class, which is an element/style that can be applied to multiple objects.

    SO in your tutorial I was following along fine. Then near the end when you changed the color of the search box using input#header-search-input I did NOT see where you got that from (exactly). I mean I saw the section. But it wasn’t a direct connection to the specific code you used. At least I couldn’t see it.

  3. Thanks, AJ. That was very helpful. I never think about using !important, but it’s a good trick to have up your sleeve for those recalcitrant CSS moments.

  4. Very helpful screencast, AJ. I agree with the others that I always forget about using !important. I just stuck it on my monitor with a yellow stickie to help me remember.

    Question – do we always start the new CSS rule with “body.custom”?

    I hope you’ll do another where you show how Firebug can be used for more advanced things like Javascript.


    • You might be able to, but I just type it. It will help you with learning it and keeping it in memory if you type it. I just end up typing it now because it’s second hand language for me. 🙂

  5. This was helpful as an intro to how to write Live CSS. I would add that putting comments in liveCSS is really a helpful process so you can remember what you intended for the code to do and so others can understand what you did. I put the comments between /* and */

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress