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.

My blog uses a pre-made template itself, it's a modified version of Thesis. It's not too far off the beaten path of the original template but I wanted to make it a two column instead of a three column and make the sidebar wider etc. Those are just two simple examples but you would be hard pressed to do this without even basic knowledge of CSS. A fundamental understanding of how the language is set up can lead to all kinds of DIY tweaks.

The SEO Benefit of CSS

This guide assumes you use some HTML in your blog posts and basic template design tweaking. With that being said if you are styling everything with HTML including fonts and tables every couple of lines you're adding a lot of code clutter. When a search engine spider crawls your site it must navigate through all the HTML code to get to the good bits, YOUR CONTENT. A good knowledge of how to use CSS will allow you use less HTML in your posts and elsewhere.

This is not only great for the crawler trying to index your site but also it's good for you. With CSS it takes a lot less time to style certain elements of your page with just a few tags and cuts down on the repetitiveness of codeing.

For example in my post Free CSS Design Element: 300x34 Title Box I show how to add a nice looking element to your site anytime you want with just a short bit of code.

See what Google has to say about creating search friendly sites.

Where do I begin?

First let's talk about the very basics of how CSS operates and how you will actually be styling your blog. CSS stands for Cascading Style Sheets, it's basically a section of code placed on your template or .css file that tells what things are going to look like.

Very simply, for a blogger like yourself, your template already has a style sheet associated with it. It's encoded into your template in the form of an internal style sheet. Which means you can edit your template's CSS right from the template file itself.

The alternative method is an external style sheet which is a single .css file that your template will go and read. There are pros and cons to each. If you're using Blogger or Wordpress without your own hosting, you're pretty much limited to having an internal style sheet.

Before we go editing your template with your own styles, let's take things easy for a while and learn about how the styling of a simple paragraph text is preformed.

Let's take a look at one example you can apply to your template very easily. This style will modify the text in all paragraphs associated with the <p> HTML tag. I'm sure you've all used this tag and if you don't now START using it. Along with the closing </p> tag. Now everything inside those tags will take on the style you are about to create.

If you would like to try out this example quickly and in a rather safe way, (you won't screw up your template) you can simply make a new post with your blog platform's HTML editor. Then once you've added your code use the preview function to test it out. That way you're not effecting your template or publishing anything.

I would recommend downloading Coffee Cup's free HTML editor - This will alow you to learn CSS offline and isolated before you go ripping into your template.

*I use this software to write all my blog posts and have used Coffee Cup's software for years and it's simply some of the best out there*

All CSS must be contained within:

*This is similar to keeping HTML inside of <HTML> and </HTML>

Now let's add the element we'll be styling:

Directly below add your HTML:

<p>
This is red text inside a paragraph that's twice the size of normal.
</p>
This text is not inside a paragraph and it is not effected.

The result should look very similar to the below image.

Now let's look at what is what.

CSS Style Breakdown - Two Main Components

The Style is comprised of two main things:

Selector - Indicates what element(s) are being styled. In this case p is linked to the HTML <p>

Declaration Block - The section of code in between the { and the } brackets contain the formating and the actual style attributes.

CSS Style Breakdown - The formating of attributes

Declaration - Inside the Declaration Block is where you can place one or more Declarations. Each Declaration always has two parts, a propery and a value associated with it.

Property - Just like when formatting text in Microsoft Word, properties are the names of the different formatting options. For example, font-size, font-family, border, letter-spacing, margin etc. As you can see most are pretty easy to understand and you will learn the most important ones in time.

Value - The funnest part of CSS, values are what you input to change the charactaristic of the Property. In this example you are changing the color of the text red, you could also use the hex colors #00000 or set the font size to 11px or x-large to name a few.

I Will Leave You to Your Devices.

For now try and change the different values to the properties of the p element. Make it small or make it blue. Use the hex codes and use the px and em to see the differences.

Here are some other handy properties to use for text you can play around with.

p
{font-family: Impact;
letter-spacing: -1.5px;
word-spacing: 3px;
text-transform: capitalize;
font-style: bold;
}

As you can see thats just a small demonstration of just some of the things you can do with just text. Remember all declarations must be closed off with the ";"or your CSS code will be invalid.