9 CSS Snippets To Spice Up Your Blog

Get your pen out...TWSS!

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

CSS-Tricks.com

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

  • http://fwebde.com/ Eric B.

    Nice tips! I especially like the tip about changing the text highlight colour. Something to try out :)

    And thanks for the link to my blog post. I really appreciate it :)

    • http://loneplacebo.com Tony Hue

      Well, you have great content, Eric! You keep publishing great material, and I’ll link to them whenever appropriate. Glad to hear you enjoyed the tip about the text highlight color.

  • http://www.techvorm.com Paritosh

    Great, Great Tips !!!! I was earlier using a plugin for drop caps but wont be using from now on :)

    • http://loneplacebo.com Tony Hue

      AHHHhhh! Plugins! Less is more. That is the best advice on how to approach WordPress plugins.

  • FAQPAL

    Nice list, it should be noted that not ALL browsers will render these tips especially the CSS3 ones.

    IE, of course, doesn’t support CSS3 for example.
    .-= FAQPAL´s last blog ..How to protect your blog from content thieves =-.

    • http://loneplacebo.com Tony Hue

      Good observation. In the age of Google Chrome, it’s either standards or go home for IE. Thanks for stopping by. BTW, FAQPAL is a pretty neat site!

  • http://www.nancy.cc/ Nancy

    Love that drop caps tip! I didn’t even know you could do that.
    .-= Nancy´s last blog ..Baby Name Needed – Boy Name for Hudson’s Brother =-.

    • http://loneplacebo.com Tony Hue

      Well, it seems that the drop caps tip is quite popular. My day got brighter. Thanks for stopping by! :)

  • http://bloggingwithsuccess.net/ SBA

    Short and Sweet — very usable tips and well presented. I posted a (long, LOL) tutorial for using a background image in the drop character and was surprised by the interest. Some themes like Thesis have the feature built-in already. Thanks for this information.
    .-= SBA´s last blog ..3 Easy Ways to Improve Your Blog Design =-.

  • http://www.pancakeseven.com Thorsten

    Thanks for these great tips. Especially the drop caps tip is very useful.
    .-= Thorsten´s last blog ..15 empfehlenswerte Design Blogs =-.

    • http://loneplacebo.com Tony Hue

      Yet, another vote for the drop caps rule. Please don’t use the plugin for it. I beg you!

  • http://www.poolerpeach.com Monique

    Really helpful post, Tony! I’m always looking for ways to reduce my plug-ins and this helps me out. Question: Will the rounded corners tip work across browsers?
    .-= Monique´s last blog ..Picture This =-.

    • http://loneplacebo.com Tony Hue

      Currently, IE does not support rounded corners; it will display it as regular squared corners. My advice to counter that would be to either not use rounded corners prominently throughout a site, or not make the corners “too” rounded, so readers who use multiple browsers will not notice the difference right away.

      I can confirm that Chrome(which you should be using!), FireFox, and Safari fully support rounded corners and CSS3 in general.

  • http://www.touchmyapps.com Louis

    Nicely done Tony. You’re on your way to becoming the next CSS superstar/guru/stud-muffin

    Keep ‘em coming mate.

  • http://www.aisajib.com Sajib

    Um, if I apply the drop cap for the first letter of each ‘p’, isn’t that supposed to drop cap each paragraph’s first letter instead of the first letter of the whole article?

    • http://loneplacebo.com/about Tony Hue

      Thanks for pointing that out! Corrected the mistake.

      Downside is that the technique utilizes the CSS3 selector :first-of-type to achieve the drop caps. In other words, doesn’t work in IE. Even then, it degrades gracefully to normal text.

  • http://mavermedia.com/blog Brad

    Really good tips. Thanks for posting and sharing!

  • Bryan

    Great tips! I think I’m with everyone else in loving the drop-caps. I can’t seem to get them to work on my site though. :-(

  • http://twitter.com/monikaborua Monika Borua

    Great tutorial. I applied it and thanks again for sharing it.