1

0

Tweaking CSS

CSS has always been a weak point of mine.  I’m more of a visual learner, so looking at just the code doesn’t really get me very far.  Pretty often I either tweak or add something to my blog, which in turn requires some CSS to make look right.  For example, just a few days ago, I added a background image of a shadow underneath any image that I insert into a post as a medium size image.  This would have taken me quite a bit longer, if it weren’t for the Firefox add-on Firebug.

Firebug let’s you edit your code in your browser and see the effects instantly.  You can even mouseover margin and padding properties, and it’ll highlight on your screen how a particular item is affected.  Very useful for visual learners!

For CSS shorthand, I still just have some notes that I take a look at to keep the items in the correct standard order.  If you’re not familiar with shorthand, it’s basically condensing the size of your code by combining declarations.  For example, font properties can go from having separate declarations for each individual property, to having a single declaration for all the properties.  As shown below.

So the font property that might normally look like:

p {
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
}

Could be combined to look like:

p {
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
}

My notes are simple and look something like:

font: style variant weight size line-height font-family;

I don’t really mess with CSS often enough, other that just minor changes here and there, to be able to know it by heart.  So Firebug has saved me quite a bit of time, and save some patience.  I’ve actually just scratched the surface of what all Firebug can help with.  It even let’s you edit, debug, and monitor HTML and JavaScript.  Both of which I have yet to use it for.