Is your blog looking like it needs a makeover these days? Strapped on cash and can’t afford a premium WordPress theme? Then you should consider editing your theme’s folder and bringing some desperately needed energy into the appearance of your website or blog. In this post, I provide you with 9 CSS recipes that you can use on your site. I hope you find them useful.

1. Changing the Border Style on Image Mouseover

Ever wanted to add some focus as visitors mouse over images on your site? With this recipe, you can add a simple border shadow effect to your images.

:hover img {
-webkit-box-shadow: 0px 0px 8px #636363;
-moz-box-shadow: 0px 0px 8px #636363;
box-shadow: 0px 0px 8px #636363;  
}

On the above example, I used box shadow using CSS3. If you want to go old school, try this simple alternative instead:

img:hover {
border-style: solid;
background: #000000;  }

This snippet will create a solid, black border when you put your mouse over the image.

Or, you can add a hover effect to images with links like so:

a img :hover {
border-style: solid;
background: #000000;   
}

2. Adjust Space Between Letters and Words

h3 { 
color: #FF0000;
font-size: 24px;
letter-spacing: 0.3em;
word-spacing: 0.2em;  
}

Line 4 adjusts the space between letters and line 5 adjusts the space between words. I hope that wasn’t too terribly difficult.

3. Use Pull Quotes for Improved Reading

Commonly found in magazines and newspapers, pull quotes are a great way to make your articles easier to read.

.pullquote { 
width: 300px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ; }

4. Change the Text Selection Color

Tired of the default blue background and white text when you highlight text on a browser? With this recipe, you can change it to your heart’s desire.

::selection { 
color: #000000;
background-color: #FF0000;  
}

Include the following to add support for Mozilla Firefox browsers:

::-moz-selection { 
color: #000000;
background: #FF0000;  
}

With this recipe, you can add a subtle detail that can make your blog stand out from others.

5. Remove the Smiley Face at the Footer of your Blog

Recognize this guy?

He’s usually hanging out at the bottom of your pages. No, he is not a virus and he didn’t come to torment you. If you have the WordPress.com Stats plugin installed on your blog or website, the plugin will automatically insert this image at the bottom of your page. To remove it, simply insert this snippet into your blog’s stylesheet:

img#wpstats { display:none; }

Or, you can simply leave him alone. He won’t bite.

6. Rounded Borders Around Images

With CSS3, you can do really start creating something beautiful. With this recipe, you can specify how much to round the corners of your images.

img { 
-webkit-border-radius: 25px;  
-moz-border-radius: 25px;
border-radius: 25px;
}

7. Indent the First Line of a Paragraph

p { 
text-indent: 2.5em;
margin: 0 0 0.5em 0;
padding: 0;   }

8. Remove Textarea Scollbar in Internet Explorer

Once again, IE can’t stop complaining and demands our attention. This time, he automatically inserts a scrollbar in the textarea even when the entire content is visible. Use this snippet to shut him up.

textarea { overflow: auto;   }

9. Drop Caps

Drop caps are a great way to make your articles look more professional. Check out this recipe:

p:first-of-type:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;  
}

Image via tnarik

For more ways to customize your blog’s design, check out this article from FWebDe: Basic CSS3 Techniques to Liven Up Your Blog’s Design