How to Identify CSS Elements On Any Template Easily | CSS For Bloggers: Part 7

In Part 6, Learn the Anatomy of a Blogger Template I discussed a little about the basics of a standard Blogger template's CSS setup.

It was meant as a visual representation of how a CSS layout looks for beginners and a bit of a quick Thesis cheatsheet.

But what if your Blogger template is radically different or you're on WordPress or any other blog platform?

Today I'm going to show you how to identify the CSS elements on any template using a very handy browser add-on called CSS Viewer

A Simple CSS Property Viewer

I was debating putting this post as a Chrome Extension Must Have but it was originally a FireFox addon. Not only that, it ties in to my last CSS For Blogger's post as well.

CSS Viewer is a simple to use CSS property viewer that allows you to quickly find the name of the element you want to tweak.

If you didn't design the template then this can sometimes be a daunting task of viewing the source code and getting creative.

I can give one little tip to do this manually, if you're trying to find the name of the element on the page find some text by it or a image file name. From there when you're viewing the source code just search for that text and it will fall into that box or class.

But with CSS Viewer all you have to do is hover your mouse over the template itself to attain the property names of what you're looking for in no time.

From there it will show you all of it's parameters, it's also good for "stealing" the CSS Style if you wish.

So if you see a font you particularly like while on a website just use the add-on and hover over to see what font it is, it's just that easy.

Here's some tips on how to use CSS Viewer:
1. When hovering try going to the top left corner of the element you're trying to identify for best results.

2. You may have to hover over the area in different spots to find the right element.

3. Sometimes it will show results for various tags like <A> and <TD> these are the HTML keep hovering until you get the <DIV> or <SPAN> you're looking for.

4. For example, install the add-on, hover over this grey box, it should say its a <DIV> #lightbox! But if you hover over the bold text it will say <B>

5. If none of these tags or terms make sense go back and read CSS For Bloggers and brush up on your HTML @ HTML Goodies

CSSViewer :: Add-ons for Firefox
CSSViewer - Google Chrome extension gallery

CSS For Bloggers

• How CSS Can Help Improve Your Blog and Tag Selectors
• Learn About Class and ID Selectors
• How to Create Simple Box Content Using CSS
• How to Align Images in Blog Posts Using Float
• Create Attractive CSS Text Effects
• Learn The Anatomy Of A Blogger Template
• How To Identify CSS Elements On Any Template Easily

Get Full Updates Subscribe to our RSS Feed with full posts via Feedburner

Build Your Blogger's Tool Kit With The Best Browser Addons

Being a guy I naturally love tools, they are what make our lives simpler and allow us to do things we as humans can't. So it only makes sense when blogging to use them to help you create amazing content and design. Just like Firefox's Addons, Chrome features some truly amazing extensions that you can utilize for your blog.

I have an ongoing series of posts called Chrome Extension Must Haves where I showcase some of the best extensions for blogging and web development. I've been a bit neglectful to Firefox so this post will also feature Firefox add-ons and Safari plugins. This post is about getting you set up a "kit" that will allow you to improve your blogging in a host of ways.

Weather it be graphics, writing, time management, CSS design or SEO, having your tool belt filled with a good set of extensions will seriously aid your blogging endeavours.

Updated Nov 19 - 2010