How to Use HTML to Style Your Blog Posts

So I’ve been using HTML for the past few months to make my blog posts a little prettier and professional looking. I am absolutely by no means a professional, and most of what I know, I know because I googled it and failed a few times before getting it. But, I thought a how to post would be handy!

When I was scrolling through Pinterest I actually came across this post by Aimee Always, where she explains how to use HTML to style your reviews a little better. So some of what’s in this post is inspired by her!

Let’s start with the basics

A lot of you will probably already know these things, but it’s handy to have them nearby because you can incorporate them into slightly more complicated HTML codes!

<b> … </b> – This makes you text bold
<i> … </i> – This makes your text italic
<u> … </u> – This will underline your text
<p> … </p> – Will start and end a paragraph
<br> … </br> – This will indicate a line break
<h2> … </h2> – This indicates an H2 level header, obviously you can interchange the 2 for a 3 or 4 as well if you want to use smaller headers!
<center> … </center> – Center your text or image, or even your GIFS!

Now let’s move to the technical stuff

I love using HTML headers now that I know how to use them. You can play around with the font size, the font family, and all the colors on the spectrum! Using large, colored headers will definitely make your blog post pop. And it makes it easy to read too, in my opinion. Anyway, here is how I build my headers:


Tip: the text in orange is what you can change to your liking! I find it easiest to put in the colors in hex code form, so don’t forget to add the #!

The result is any of my headers in this post, but I also use this style header for book titles in my reviews. And that looks like this:


Making specific text a different color

As you can see in most of my previous posts, sometimes a single word or sentence is a different color. Unfortunately, WordPress doesn’t allow you to select a color for only one word (at least, I think), so long live HTML! I also like to make the colored text bold so that the text pops just a little more. Here’s how to do this:


HTML span

How to insert a hyperlink, but make it pretty

When I insert a hyperlink, I still want to be able to determine which color the text is. I haven’t quite figured out yet how to make the text color change when I hover over it with my cursor, but maybe one day I will and update this post. Here is how to insert a hyperlink:


Use block quotes!

This is one I found on Aimee’s website, and I use it in almost every post now. Block quotes make it easier to make a synopsis stand out. But I sometimes I also just use them to make my post look a little more playful. You can change the padding size to whatever you want, but I find that 20px looks best.


HTML block quote

Create your own buttons!

This one is also from Aimee’s website, but you can change the destination of your button to anything you like. I use them for Goodreads, and recently also for The Story Graph! But you can also link your Pinterest, someone’s else’s blog… anything really! This code is pretty long, so I suggest saving this one in a document somewhere you can easily copy-paste it.


HTML button

Inserting an image with a URL

To save space in my media library, I now insert images with a URL. I always use images when I make a review, and inserting them with HTML requires a little more effort than just pasting the image address. So here’s how to do it:


HTML image

You can make the image any size you want, but I find that for reviews 270×400 pixels works really well. “hspace” refers to the amount of space around your image. If you don’t have hspace, your text will be pushed against your image with no space in between. I put this space it 25 pixels, but you can experiment with that too, of course!

Making your post look like this:

Wanna know how to achieve the same as the image below? Just combine ~almost~ all you’ve learned above in this order:

1 – Insert image
2 – Book title with H2 header
3 – Book author with H2 header and smaller font size
4 – Publishing information
5 – Your rating
6 – Insert the buttons
7 – Insert the blockquote
8 – All done!

Playing around with these HTML codes is super fun, and you can mix and match anything you want. Change the font, change the color, change the size… it’s all possible! However if I have on big tip, it’s to check if your code works often! I’ve spent so much time going through all my code trying to figure out where I made a mistake. So my advice is, every time you write some HTML code, check if it works!

And that’s it! I hope this post was helpful. I love playing around with colors, and I usually change my color scheme to match the season! In a month or two, you can expect to see some wintery colors on here!

Find more Blogtober here!

Or more tips and tricks here!

4 Comments

  1. October 17, 2020 / 4:47 pm

    Love this! Thank you so much! I know nothing about coding so this was so simple and easy to understand for a novice blogger too.

    • simonevanheijst
      Author
      October 17, 2020 / 6:35 pm

      I’m so glad you found it useful! I knew nothing about coding before either, so I’m glad HTML is relatively simpleπŸ˜„

  2. October 21, 2020 / 7:51 pm

    I’m saving this post for future reference. I’ve often wondered how other bloggers make those cool buttons!

    • simonevanheijst
      Author
      October 21, 2020 / 11:23 pm

      I’m glad you found the post useful! I love making those buttons

Leave a Reply

Your email address will not be published. Required fields are marked *