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?
.png)