You don't have to be a CSS guru to make a few simple changes to the styles on your blog to improve its looks and readability. Three places you can make a difference are with line-height, padding and the margins on headings.

To experiment with your stylesheet, change one thing at at time. If you don't like it, go back to the way it was before. Each time you change the style sheet, save the change and refresh the page on your blog to see how it looks. It would be smart to save a backup copy of your original stylesheet just in case of some mishap.

The CSS line-height property determines the distance or spacing between the lines of text on the page. In the print world, this property is called leading. The purpose of line-height is to give lines of text some space so that the text doesn't look unreadably dense. A little room between the lines makes the text more attractive and easier to read.

Line-height can be applied to any text element, but it’s probably best to set it in the CSS rule for the big containers of your blog content. Depending on your blog, you may want to use line-height in a rule for BODY or for a container div like CONTENT or SIDEBAR. When you set the line-height rule for a big container like the content div, then everything in that section of the page inherits the line-height value.

You can find the right spot in your style sheet to add line-height if you look for a rule that mentions font-family and/or font-size. It might look something like this:

mainContent {font-family: Tahoma, Geneva, sans-serif;
 font-size: 1em;
}

You can add a line-height property and value to that rule like this:

mainContent {font-family: Tahoma, Geneva, sans-serif;
 font-size: 1em;
 line-height: 1.4;
}

If your blog already has a line-height set, you can change the value.

I can't give you a perfect value for the line-height rule. Is it 1.4, 1.5, 1.8, 2.2? It depends on your blog, your font, the size of your font. You can find some photos of the effects of various line-height values in this article on Web Teacher.  I suggest you try two or three line-heights before you decide which works the best to you.

Have you ever increased the text size on your blog to see what happens? You can find a zoom command in the browser's View menu that will let you increase or decrease text size. If you've never looked at your blog that way, it's a good idea to see what happens, because there will be people visiting you who do use zoom. Me, for instance.

A problem I have with many blogs is a lack of padding on the left and right sides. At the normal font size, this may not be a problem, but for a page zoomer like myself, it may mean bad things. I have to zoom the text size on many pages I visit to make it large enough to read. If there is no padding on the left and right, the text often bumps right into the extreme edge of the browser window after I zoom. This makes reading difficult: hard to read before the zoom, hard to read after the zoom. A little padding would help.

The place to look for padding rules in your stylesheet is in rules for individual page elements. Padding can be used on anything, but text elements like P, H1, H2, LI, and TD, are a good place to add padding if you need it.

Everything on your web page is in an invisible box. The box can have padding on the top, right, bottom and left. Each side of the box can have a different value for padding. In CSS terms that might look like this:

h1 {
  padding-top: 1em;
  padding-right: 2em;
  padding-bottom: .2;
  padding-left: 2em;
}

You might see the rule in CSS shorthand, where the first number represents the top and bottom padding, the second the right and left.

h1 {
  padding: 1em 2em;
}

If the padding is the same on all sides, a single value covers it.

h1 {
  padding: 5px;
}

To resolve the problem I have with some blogs that allow the page to extend all the way to the left and right margins of the page when zoomed, a few pixels or ems of padding-left and padding-right on the text in paragraphs or post-entry divs would fix it. I was going to make an example of The Huffington Post for this, but I see that HuffPo has now contained its page width in a way that keeps some white space on the sides no matter what I do to the text size. Thank you, HuffPo.

To get all the facts on padding, check Jennifer Kyrnin's page about padding on about.com. She has a couple of example paragraphs with different amounts of padding you can study.

The third CSS trick involves margins on headings. Headings are the h1, h2, and h3 elements on your page.

Margin is similar to padding. Margin goes around all four sides of any element  the way padding does. But margin is outside the border of the element (even if the border isn't visible). Padding is inside the border.

In a blog, you have a page full of headings and posts. The visual hierarchy of the page should be clear in terms of which heading goes with which post, which blocks of content are related. The visual principle of proximity is what you use to make sure that headings and the content they identify appear related to the eye.



Two headings, with a difference in proximity to the material they are above are shown in the image. On the left is a heading with a reduced margin between the heading and the paragraph. On the right is a heading with no CSS margin rule applied. Here's the CSS for the example on the left.

h1 {
 margin-bottom: -5px;
}

On the left, the margin-bottom has been reduced beyond 0 to -5px. Negative numbers are allowed. As you can see by comparing it to the default spacing between the heading and paragraph you see on the right, the heading on the left seems more related to the following paragraphs. Close proximity creates a visual grouping that makes more sense to the eye.

If you wanted more space between a heading and the end of a post just above it on the page, you could increase the margin-top value for the heading. That additional margin would make it clear that one post ended and a new topic was on the way. Again, it's about proximity.

Your blog's style rules may use some class like postTitle or postHeading to label the heading rules. If you don't see something as simple as an h1 or h2 in your stylesheet, look for a logical sounding name that would identify a heading.

For the CSS adventurers, Styling Design Elements: Five Beautiful Post Headings  gives you several examples of more complex CSS rules that go beyond my simple margin tip that will help you create very attractive headings for your blog.


--
Virginia DeBolt
BlogHer Technology Contributing Editor |Web Teacher |First 50 Words