7 CSS Tips To Make Your Blog Look Fresh

Giving your blog a whole new feel can be as simple as adjusting a few CSS classes, or ID’s, in your stylesheet. In WordPress you can easily edit your stylesheet from the Appearance > Editor screen.

Here are 7 CSS changes you can make to your blog for a fresh new look.

Make your blog fresh

Make your blog fresh

1. Background colors

Changing background colors on your blog is probably the easiest thing you can do. Simply look in your stylesheet for any instances of:

{ background: #ffffff; } Note: the #ffffff is simply an example here.

Depending on the stylesheet of your blog there may be various background colors defined. If your blog uses images then you will see those written like this:

{ background: url(folder/image) }

In this case, it’s best you either contact the designer of your theme, or if you are comfortable changing it on your own go ahead and play a little. Make sure and save a backup first though!

If you need to find colors you can find the “hex values”, i.e the #ffffff, at colourlovers for the color you desire.

Now that you have the hex value of your color simply edit the CSS style and click “Update File“. Reload your blog page to see the change in color!

2. Headings

You see the “Headings” above, it is enclosed in an H3 tag. You can style all of your individual H1, H2, H3, H4, H5 and H6 tags. Chances are that you will be using the H1, H2 and H3 tags the most.

It may seem a bit confusing at first because designers like to give different styles for an H3 tag that displays in the sidebar and another style for the H3 tag that gets used in the posts. An example is this very blog here.

For the post I’ve used:

.post h3 { border-bottom: 1px dotted #474444; color: #474444; font-size: 1.7em; padding: 5px 0 10px; margin-bottom: 10px; }

and for the sidebar I’ve used:

.sidebar h3 { background: #fff; font-size: 1.6em; letter-spacing: 1px; padding: 20px 0; margin: 0; }

You need to decide which headings you want to change and find the appropriate style in your stylesheet too edit them as you require. There are a myriad variety of choices of you can use here. I’ve provided some examples of what you can do with headings below.

.your h1, h2, h3 { border-bottom: 1px solid/dotted/dashed #hexvalue; color: #hexvalue; font-style: italic; }

If you want to edit the headings even further try adding a background color, I always choose to keep them simple though. Again, the #hexvalue for a color you want can be found at ColourLovers {linked to in point no.1 above}

3. Blockquotes

This is a blockquote, it has it’s own styling applied to it. It’s meant to grab attention.

Styling the blockquote is one of my favorite aspect of blog design. A well styled blockquote is a great way to grab your readers attention in your post or page.

In your stylesheet look for:

blockquote { styles here } and
blockquote p { styles here }

The “blockquote” tag helps in styling the general look of the quote area itself. The border and background you see above are styled by declaring styles for that tag. Here’s my style code to give you an idea of what you can do with it.

.post blockquote { background: #fbfbfb url(images/quote.gif) no-repeat 10px 10px; color: #474747; font-size: 1.3em; line-height: 2em; margin: 10px; padding: 10px 10px 10px 85px; border: 1px solid #e9e7e7; }

I’ve added an image to the background, declared a background color, gave a color for the text, changed the font size, added some extra line-height, gave it a border and some margin and padding. That may seem like quite a bit, but there’s a LOT more you can still do.

For the paragraphs within the blockquote all I did was add this:

.post blockquote p { padding: 10px 0; }

So, if you want to change just one thing first I would suggest you get yourself a nicely styled blockquote.

4. Lists

This is a list in the general sense of the term, except it does not use the list styling, which would look like this.

  1. List point 1
  2. List point 2
  3. List point 3

My list styling looks like this:

.post ul { margin: 10px 50px; list-style: disc; } - This is for the unordered list
.post ol { margin: 10px 20px; } - This is for the ordered list, shown above
.post li { color: #474747; font-size: 1.4em; padding: 10px 0; } - This is for the lists for both of the above

You can add background colors, borders, change the font size or even use a background image. People love lists and a well styled list draws crowds.

5. Links

This is the most simple change that you can make in your stylesheet, the color of a link. There’s a good chance that your stylesheet has declared the link style in one area, here’s mine.

a { color: #800808; text-decoration: none; }
a:hover { text-decoration: underline; }

You can just change the color if you like, or you could even add a background color. Here are some examples.

  1. Link 1
  2. Link 2
  3. Link 3

Here are the styles for the above links:

{ background: #444444; color: #fff; padding: 3px 5px; } - link 1
{ border-top: 1px dotted #333333; border-bottom: 2px dotted #000000; font-style: italic; } - Link 2
{ background: #c9c1c1; border: 1px dashed #800808; color: #000; padding: 3px 5px; } - Link 3

6. Spacing

Spacing can be handled in a few different ways.

First of all, you can give the whole post or page some spacing. For instance if I added this to my stylesheet:

.post { padding: 10px; }

which would make the whole document condense 10 pixels inwards.

Secondly, you can add spacing for your paragraphs with these styles:

.post p { padding: 10px; line-height: 22px;  }

This will give the paragraphs a 10 pixel padding all around, as well as provide spacing between lines.

7. Images

If you noticed the image at the top of this post, it was enclosed in a border with a background color. For WordPress themes, most designers tend to add the default styling. However you can play around with the styles and use different hex values for colors and maybe some more padding and margin, if you desire.

My image styling looks like this:

.wp-caption { background-color: #fbfbfb; border: 1px solid #e9e7e7; padding: 8px 0; text-align: center; }
.wp-caption img { border: 1px solid #e9e7e7; margin: 0; padding: 0; }

Best practice here would be to play around with background and border colors.

So there you have it, 7 CSS tips that can change the way your blog looks and feels. If you have any questions feel free to leave a comment.

Please take a moment to share this post with your friends and do sign up for our RSS feed! Thanks!

  • Published: June 14, 2009
  • Posted in Blog
  • 1 Comment »

One Response to “7 CSS Tips To Make Your Blog Look Fresh”

Leave a Reply