5 Little Known Way to CSS Styling Your Blog

Let me just say this is supposed to be the second part of What You Need To Know About CSS – The Basic which I wrote a couple of days ago. Today I’ll like to share with you a couple of CSS Styles you’ve probably know little about.

As we all know it, CSS controls the appearance and layout of your whole blog. As such a little CSS tweak may sometimes be needed to improve your theme design and enhance your users browsing experience.

5 CSS Tips to Improve Your Blog

Styling your blog has never been easier now if you are familiar with editing and modifying your Style Sheet. Below is 5 of the CSS tips you could adopt (the one I’m using) to improve the visual appearance of your blog.

1. CSS reset

The idea to reset your CSS is to tackle the issue of cross-browser inconsistency which may make your blog quiet different in layout from one browser to another. Have you ever noticed your blog layout may not look quiet you want in IE? Oh I hate IE. Therefore it is important to reset your CSS before you attempt to pimp your blog. Based on Eric Meyer’s Global CSS Reset, here’s my reset styles

body,
h1, h2, h3,
p, ul, li,
blockquote, pre, code,
form, img {
	border: 0;
	margin: 0;
	padding: 0;
	outline: 0;
	}

You can grab a copy of Eric Meyer’s CSS Reset to use and tweak as fits you best.

2. line-height

What is line-height, as it is called in CSS? It is the area within the lines. I guess this is one area where most people tend to forget to define. Your post content should be made easy to read for your readers. Similarly so, a paragraph when proper line-height is taken care of should not strain the eyes.

Which one do you prefer? It’s quiet obvious, isn’t it? So don’t let your visitors click away, set your line-height properly, will you?

#content {
	line-height : 1.8em;
	}

3. float

If you are using WordPress 2.5 image uploader tool, you can insert and define with a few clicks the position of your image either to the right or left of your text paragraph.

For example, when you insert an image directly into your post, like the image on the left, you will have HTML tags like this

Let’s put some style to image class by adding float element for better image positioning and margin value to it to prevent the image sticking to the text.

img.alignleft {
	float: left;
	margin-right: 10px;
	}

img.alignright {
	float:right;
	margin-left: 10px;
	}

The margin-left and margin-right is to create the white space of 10px between the image and your text when you position or float your image either to the left or right respectively.

4. overflow: hidden

This basically tells the browser to hide any long overflowed content, an over-sized image or pretty long text link for instance, which would otherwise screw up and break your blog design. You wouldn’t want it to happen, would you?

#content {
	overflow: hidden; /* Prevent oversized content to break */
	}

5. text-align

Whether to align your text paragraph to the left, right or justify, it’s really up to your own individual preference. However, I prefer it to be justified to create a better and neater style of presentation. Don’t you agree with me?

#content {
	text-align: justify;
	}

I haven’t been long enough playing with CSS to understand the reason why a lot of people still prefer to align the text to the left. Would somebody explain it to me?

What have you got to say? What other CSS tips and tricks that you know of that will improve the accessibility and readability of your blog? I’m sure there are a couple of hundred things you can do improve the visual layout your blog using CSS, so let me know your suggestion by leaving your comments below.

Related posts

• Image Caption Not Working? The CSS Solution You have probably known by now that one of the latest addition to WP 2.6 – among other great...
• How To Enable Gravatar On Your Blog Without Plugin Do you know WordPress 2.5 has a built-in feature? Have you tried to enable it and still no picture...
• Yet Another 8 CSS Tips For Your Blog CSS is what separates the layout from the content of your blog. It gives you the power to control...
• 5 Possible Ways to Speed Up Your Blog Does your blog load as quickly as you — and your users — would like? or does it take...
• Probably One Of The Nicest Firefox Plugin You’ll Find Probably one of the nicest I have just discovered and got my attention is Hyperwords. It is a nifty...

Sponsor of The Month

• Keyword Academy
  If you are struggling to make money online, this is where you'll get the method, the support, and the tools you need to build a sustainable low-maintenance income online.
• Is Your Brand Here? Advertise with Us!

Tagged as: CSS, CSS tips