Firebug: CSS Styling Made Easy for Nature Bloggers

If you are wondering what CSS is, it is yet another acronym to cloud your brain that essentially means “website styling”. (It actually stands for cascading stylesheets which can complicate the issue.)

We use CSS to position items, make links look pretty, change font sizes, etc. Without CSS we could still have style, it would just be clunkier and not as fun to edit. Wait, did I just say “fun”? Sure! Adding style to your blog/website is a big part of attracting returning visitors, helping visitors read and enjoy your content, and also make a site stand out.

But this isn’t just about CSS. There are many tutorials on how to style like a pro. Instead, we’d like to show how a Firefox plugin called “Firebug” can assist you in editing your blog’s style with ease.

Grab the plugin here and install it into Firefox. In the bottom right corner is a little bug icon that toggles the Firebug console. This opens up an overlay on your site where you have numerous options. Here our focus is just on the “Inspect” and “HTML” options.

Please click on the images to enlarge to see the details.

We’ve selected the yellow box which then shows the styles already attributed to that element. On the left side you can actually edit the text; perhaps to see how more or less text would wrap around an image. On the right side is the CSS. You can edit and add new styles to this.

I changed the background and border colors just as an example. You could edit the padding, margins, width, and more. The best part of all this: these are non-destructive changes. You can easily see how a small (or large) adjustment would change the look. If you are happy with it, then you can manually change the .css file once and be done with it.

This works essentially on any webpage. So if you like what someone has done with their site and wish to emulate it, you can easily do so.

Tagged as: Blogging, CSS