Some Simple CSS To Save You A Lot Of Work

I touched on this briefly in my Case Study I post, but did not really explain it much.

Giving a Style To Your Author’s Bio

Let’s say you have a certain part of a post that you want to style in a certain way. For example, maybe you use articles from places like ezinearticles, where you need to keep the author’s bio or resource information with the article.

Doing It the Hard Way

You could do this right in your post, as follows (but I DO NOT recommend it – I’ll tell you why):

Here you are putting the styling information (the stuff in red above) right in the post.

Why Is This Bad?

The reason you don’t want to do it this way is that you are putting this right into your post. You would have this same stuff in every post where you want an author’s bio box.

What happens when you want to change your template, or just change the look of the box? Maybe now you want it to look like this:

You would have to edit every post to change the style to the new style that you want.

Doing It the Easy Way

Here is how you save yourself a ton of work.

What To Put In the Post

This is what you put in your post:

You give it a class, and name the class something (anything that is not already being used). In this example, I used “bio” because it will be the author’s bio information.

What To Put In the Stylesheet

Then, to do the styling, you put the following in your stylesheet (I will tell you where to find the stylesheet in a moment):

Sometimes, in your stylesheet, it is written like this to make it easier to read (it means the same thing):

Here is the translation of that:
The name of the class is “bio” (the period in front of bio means it is a class).
Inside the curly brackets { and } are the styling instructions for that class.
border: the border of the box is 1 pixel in width, solid, color #222222 (which is a dark gray, almost black)
background-color: the background inside the box is #e5f0fc (which is the light blue color)
padding-left: this gives 10 pixels of padding between the text and the box (on the left)
padding-right: this gives 10 pixels of padding between the text and the box (on the right)

This way, if you want to change the styling of the author’s bio, you just have to change it once in your stylesheet, and you don’t have to change every single post. What a time savings!

Here is the styling for the second example:

You can use your handy CSS Reference and Color Chart to play around with it until you get the look that you like.

Where Is the Stylesheet?

For WordPress, you find the stylesheet in your Admin area, under the Presentation tab, and then under the Theme Editor tab. The stylesheet is the first file there.

I would suggest copying the file to a Notepad file before you start making changes, just so you can get back to the original version if you mess up. Just add your code of:

to the stylesheet file somewhere (at the end is fine), and press “Update File”. Done!

For Blogger, I think the stylesheet is in the template, the beginning part of it.

Now You Try It!

Try to make friends with your stylesheet, and save yourself a lot of work. Try a few easy things like this, and you will soon be hooked on CSS.