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

Learn The Anatomy Of A Blogger Template | CSS For Bloggers: Part 6

For me one of the enjoyable aspects of blogging is tweaking your blog's design to get it just the way you want.

If you're like me you will want to change the appearance of every single facet of your blog's template.

Today I'm going to be showing you how to identify the CSS elements of your theme.

Once you figure out the CSS selector of the section you want to manipulate you can then later edit the CSS for it. Half the trouble is figuring out the names of the different elements in order to do that in the first place.

Think of this is a Blogger CSS Element Cheat Sheet.

Create Attractive CSS Text Effects | CSS For Bloggers: Part 5

Why do we use CSS for our blog? To make things look cool of course. One way to spruce up your posts is to make your blog post tile and header text stand out a bit. This will make your blog appear to have the finishing touches and fit your particular style. Afterall, that's what CSS is all about.

Today we're going to be checking out some really great effects we can apply to text anywhere using either a custom class selector or editing our header tags directly on the style sheet to make broad changes to all our posts.

How to Align Images in Blog Posts Using Float | CSS For Bloggers: Part 4.

One of the most simple and effective ways to add some flavor to your blog posts is adding images. Almost everyone uses at least one image in each blog post to create some visual interest. It also provides a nice thumbnail for when it gets shared on Facebook or a related posts section.

So how do we easily add these images and align them so that they can quickly be placed either on the right or left and wrap around your text? We can do this with CSS of course! As you can see my lovely header image to the left fits in nice and snug with this text wrapping around it. In fact this is so easy you'll be able to start using it immediately and want to fill your posts up with all kinds of nice stock photos.

How to Create Simple Box Content Using CSS | CSS For Bloggers: Part 3

In our last lesson we talked about ID Selectors and how you can use them to make unique blocks of content. These "blocks" have several applications. Maybe you want to create a welcome box that starts at the beginning of your posts to welcome new visitors to your blog?

You may want to create a box at the end of your posts to put more information on how users can subscribe to your RSS feed. In fact the possibilities are endless and with CSS. You've never had this much control on adding elements like this to your blog, that is, if you know how.

Having a few custom-made boxes to fill content into on hand can be very useful and I use them heavily on my blog. Creating one is simpler than you might think once you know the basics.

Learn About Class and ID Selectors | CSS For Bloggers: Part 2.

Welcome back bloggers, in our last lesson: CSS For Bloggers: How CSS Can Help Improve Your Blog Part 1. We discussed why you should learn CSS and how you can use it to improve your blog. Also, the SEO benefits of knowing CSS and the basics of implementing your styles through internal style sheets. At the end I showed you guys how to style paragraph text using <p>.

If you didn't understand a word in that intro paragraph you might want to go check out Part 1. We are going to pick up where we left off styling the paragraphs.

CSS For Bloggers: How CSS Can Help Improve Your Blog Part 1.

If you're reading this you're obviously curious about CSS pretaining to blogging. With all the pre-made templates out there ready to be downloaded and installed you may say to yourself, "How can knowing CSS help make my blog better?"

In this series, CSS For Bloggers, I will not only show you why you should learn a little bit of CSS but also show you how to use it.

As a web designer myself for many years I would have never survived without my knowledge of HTML. It honestly wasn't until I got myself into blogging that I felt it was time to learn CSS. It has become a staple of my everyday blogging and designing.