- Share This Post
- submit
- 6
-
Sparkle (0)
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
