5 CSS Tricks To Transform The Look Of Your Blog

Jul 14 2015
Give your blog a makeover by using these 5 simple CSS Tricks. These will transform The Look Of Your Blog - try them out! You can find the detailed steps + the code to implement them!

The other day I was designing a template for my design shop, and I was trying out a few fonts for the body text; I just wasn’t able to find a font that was clear and matched the overall style of the template. Then out of boredom, I started changing a few CSS properties of the font and voila! the font suddenly seemed a lot more appealing. Aha! I realized how a small thing like letter-spacing had changed the entire look of the font.

CSS may be intimidating at first, but it is a powerful tool that can alter the appearances of web elements in a large way. So here are 5 CSS tricks that you can use to transform the look of your blog :

1. Letter Spacing: This property is essentially the spacing between the letters of the text. I have seen how changing the letter spacing in a text can make an otherwise ‘blah’ font look exotic! You can change the letter spacing for any piece of text in your blog by using the code in the example below:

2. Alignment: I have always used justify to align my body or post text, but I have seen many websites and blogs follow left alignment as it is perceived to be more friendly and approachable. Whatever may be the case – friendly or formal – it is important to maintain consistency in the alignment. Left alignment in one place and center in the other will make the style of your blog look inconsistent.

3. Borders: Adding borders to certain elements in your blog will help to highlight and distinguish it from other elements. In my blog, I have used borders to highlight my sidebar headings, to separate posts from each other and also for my quote boxes. Using a quote box can be particularly useful to highlight and present content in a neat and organized way. For eg. if you want to post a food recipe, you can present the recipe neatly using a quote box. You can check out this in action in my Choco-almond recipe here.

4. Padding & Margins: White space! The best way to make your blog look neat and clean is by using white space. A good way to emphasize white space is by using ample padding and margins for your design elements. For example, you could use padding for your post footer to increase the spacing between two posts or use wider margins in your sidebar to make it look less cluttered.

5. Color: My favorite element of design is color. There are an insane number of ways to use color to spruce up your blog, but it can also be tricky; using color in the wrong way can mess up a design. I specifically use color on my blog to emphasize my logo, highlight links, headings and icons. You can easily pick the hex code of Β color you want to use and set it in the CSS code for the design element you want.

These simple changes can transform the look of your blog quickly and make a significant difference to the design. I am currently working on rebranding my own website and I have found these properties to be very helpful!
What are some of your favorite blog designs?

If you are interested in learning more about the course, enter your email address to join the waitlist and be notified when it launches! :)
  • Thanks heaps for the tips! Will definitely be using them to transform my blog! xx


  • Oh thanks so much for sharing! When I upgrade my website I will use some of these tips!


  • emily couture

    What great tips and ideas πŸ™‚

    emily xx


  • Kelly

    These are awesome tips!

    I currently use wordpress.com premium to make amends to the CSS on my blog, but I was thinking about using wordpress.org and self-hosting and developing my own CSS separately because there seems to be more flexibility. What is your preference?

  • I'm definitely going to try these when I get home!

    Jenna / Beauty And The Style

  • I love the idea of the border! Definitely going to try that out in the future πŸ™‚ x


  • I've been trying to add borders to my sidebar widgets all day! Nothing seems to be working for me. I would really appreciate some help!


  • This is so helpful! Thank you. πŸ™‚

  • Awesome, let me know how it goes jenna! x

  • Hi Madison, feel free to shoot me an email, i ll try and help out πŸ™‚ x

  • thanks for these! I just used the justify text one πŸ™‚

  • I think letter spacing is often overlooked! It can make a big difference in blog design!

  • Great post! I've just added literally all of these codes to my blog. But I'm having a bit of trouble with the border code. For some reason, the box is a lot bigger than it needs to be, so there's a large gap underneath the title. Can anyone help me with this? You can see it on http://elleandfoxblog.blogspot.co.uk/

  • Hey Gina πŸ™‚ So good to see your comment, I love your blog btw. Yes – letter spacing can make dramatic changes to a font! xx

  • πŸ™‚ Awesome to hear that Joyce xo

  • Hey sophie, I see you need to adjust the padding around your headings πŸ™‚ xo

  • Thanks for the help! I'll try that now

  • Oh my goodness! I’d like to think I’m not a total CSS newbie considering I designed my site myself but I’m slightly embarrassed to admit I never knew what the “justify” button did. I’ve always just used the left align option and never knew how blogs got their text so nicely lined up. You just made my site a little cleaner! Thank you!

    Christine | DimesandDonuts.com

  • Wow, this is like one of the best articles I have read on th blog design! I am really bad at doing design but I always try to improve it a little bit. So this is awesome! πŸ™‚

  • I know with left aligned text it’s also easier for readers to read in longer formats because it’s easier for the eye to pick up where it left off when switching from one line of text to the other. When all of the lines have the same ending spot it can increase the amount that readers get ‘lost’ while reading! πŸ™‚ Great tricks Chaitra!

  • Pingback: 45 Of The Best CSS Tips, Tricks And Tutorials Pages On The Web Β· Wordpress Examples()

  • Thank you so much PinkPot! This was so helpful! I am going to trh this as soon as possible!

  • These are great tips and very interesting to learn that knowing little tricks here and there can completely change the look of your blog to being more spruced up and interesting. What I would like to know is how to use css to give my widgets in the sidebar a background colour….

    • Hi Sheri πŸ™‚ Thank you!

      You can use the background-color property to add color to your sidebar widget backgrounds. You need to write the relevant CSS code in your themes file for it. The property is called background-color.

      Hope this helps! xx

      • Ok, will try to find out online where to do this

        • That is super awesome πŸ™‚ Let me know if you have any specific things you d like to learn about CSS!

      • Got it done – easy peasy