Quick CSS tutorial for bloggers

CSS stands for Cascading Style Sheet. You will find your Cascading Style Sheet at the beginning of the Blogger's template surrounded by the <style> and </style> tags. I use the Blogger template "Minima", so this is what mine looks like. Your's will be similiar depending upon your template.

<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */
body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

(The rest of the style sheet removed)

</style>

Sometimes notes are written into the template. These notes are surrounded by */ and /*. These comments are for the person editing the template and is not recognized by the browser. In this example the comments give credit to the designer of the template. Other times the comments are put in like this: < !-- End #main -->. (Please note, I put a space between the < and ! so it would show in this post.) It is the same principle.

In this example, these symbols, { and }, means that whatever is surrounded by { and } are properties of the body of the blog. This is where you can change the look of the body. You can change 'font:x-small Georgia,Serif;' to 'font:Verdana,Sans-serif'. You can even change the font style here by adding this line---> 'font-style:italic;' . Or the font color by changing 'color:#333;' to whatever you like. Now it is easy to see how to change the color of the body's background!

Remember, the CSS is a guide for your template to follow. If you make a change there, it will change any instance where it occurs in your blog. For example, it allows you change the color of your post title one time versus editing each and every title in you blog one at a time. A miracle!