How to Use HTML and CSS to Design Better Blog Posts in WordPress

1K Shares

Every blogger should learn to use HTML and CSS in WordPress. However, the thought of using code terrifies many bloggers. It shouldn’t. It is another valuable tool in your blogging arsenal that you can use to your advantage.

I have a confession to make. I’m a bit of a nerd. I actually enjoy using HTML and CSS to spruce up my blog posts and blog. Not only does it make my posts look pretty, it improves SEO and makes it easier for my readers to skim my posts.

More than half of my audience uses their mobile device to read my blog. That means I have to make it easy for them to read my content on the go. To do this, I use a little bit of HTML and CSS to help them find the information they want fast.

*This post contains affiliate links. That means that if you make a purchase after clicking on a link I may earn a small commission at no extra cost to you. For more information, click here.

Easy, Peasy HTML and CSS Code

In this post, I am going to teach you how to use HTML and CSS in WordPress to properly format your blog posts. This will help your reader find what they want quickly and will improve your blog’s engagement and readability.

No stress. No pressure. I’m just teaching you the basics with the purpose of designing better blog posts in WordPress. I promise to make this as easy and painless as possible.

As a bonus for my subscribers, I have also created a free downloadable and printable cheat sheet. If you are not a subscriber, use the following form to get your free copy now.

Now that you have had the opportunity to download your free copy, let’s dive in!

Why Use HTML and CSS in WordPress?

You can write a blog post without manually entering a drop of HTML or CSS. So why bother? The truth is that you won’t always find a plugin to do the job and knowing a tiny bit of code gives you a better understanding and more control over your content.

I like to have control over what my blog looks like and how it behaves. I can’t tell you how many times that knowing a little HTML has helped me make sense of a problem and correct it.

As an example, when I started using Amazon affiliate links, I corrected a display issue. For some odd reason, when I inserted the code into my blog posts, the image that appeared didn’t show completely and a scrollbar would appear next to the partial image.

I was able to solve the problem by changing the output image height in the code without compromising the link. If you are new, I don’t recommend this, but it is a simple example of one instance in which knowing some HTML saved the day.

What are HTML and CSS?

HTML stands for Hypertext Markup Language. It is the code that a web browser reads and converts into the words and images that you see when you visit a website. It’s a computing language. HTML generally affects the functions within a page.

For instance, if you click on a link, HTML tells your browser where to go. It would be impossible to have a web page without HTML

CSS stands for Cascading Style Sheets. Whereas HTML is the function of your web page, CSS is the style. This allows you to change your font, colors, and create a style for your blog. Much of your WordPress theme contains CSS because it is what affects the appearance of your blog.

Combined, these two sets of code comprise of the majority of what you see on a web page. Your browser is a code reader that makes visiting a website user-friendly and aesthetically pleasing.

The Basics of HTML for WordPress Bloggers

First, let’s look at where you can find the HTML and CSS for your blog posts in WordPress. To do so, navigate to the text editor of a blog post. From the WordPress dashboard, click on “Posts > All Posts” and click on a post title.

The area below the title where you type your blog post is your text editor. In the upper-right corner above the white text box, you will see two tabs. One is the “Visual” tab and the other is labeled “Text.” By default, you will be using the Visual tab. Click on the “Text” tab.

Above is a screenshot of this blog post. This is before editing, so please overlook any errors. 😉

In the above image, it is easy to identify the HTML components because they are all contained within pointy brackets. The opening tag is inserted before the text to be modified by the HTML and the closing tag (the one with the forward slash in it) follows the text.

Every single letter, space, and character matters in HTML and CSS. If your tags don’t work, chances are that you missed one of these. Don’t stress about it too much if your tag doesn’t work. Simply delete it and re-enter the tags if you can’t find the error.

In the screenshot above, the first tag you see is <em> which indicates italics. In the middle of the text between the <em> tags is another tag. This one creates a hyperlink or link in the text and tells the web address that the text between its tags should link to.

The only other HTML in the example above is at the end, when you see the <h2> tags for the header for the next section.

How to Use Header Tags

In the above example, I missed a header tag. H2 and H3 header tags are an important tool for making your text stand out for readers who skim your posts. The main headers in the text should be H2 with H3 subheaders.

Below is the screenshot of the text with missing header tags. I have selected the text so that you can see where the H2 tag should be entered before and after the text.

Adding the tag is simple from the “Text” tab in your text editor. Before the text, enter the following tag: <h2>, then following the text, enter the closing tag: </h2>.

Your text should look like the following screenshot.

If you click on the “Visual” tab of the text editor, you will see the following, if the tag is entered correctly.

See how easy that is? All HTML involves is entering tags around text. These tags alter the behavior of the enclosed text.

The following are common header tags that you can use in your blog posts.

For your convenience, I have included these, as well as their keyboard shortcuts on the Cheat Sheet. If you didn’t download it above, you can download it using the form below.

Header 1 tags are generally used for your blog post title. You will rarely use these since WordPress themes do this for you. Header 2 tags are used for the main headings in your blog post. Headers 3 through 6 are all subheadings.

I don’t think I have ever used a Header 5 or Header 6 and I can only recall using a Header 4 once. 99.9% of the time you will only have to worry about H2 and H3 header tags in your blog posts.

Formatting and Aligning Your Text

Formatting and aligning your text is a bit more complicated than the headers. I prefer to use the toolbar in the text editor for these functions but it is always good to be aware of the HTML and CSS just in case things don’t turn out as planned.

Paragraph or the <p> HTML tag is your default formatting in WordPress’s text editor. When you enter a header tag, this will override the paragraph tag for the selection between the opening and closing paragraph tags.

Bold and Italics are also pretty straight-forward HTML tags. To make your text appear bold, insert the <strong> tag before the text and corresponding </strong> closing tag after the text. For italics, your opening and closing tags will be <em> and </em>.

CSS

This is where your formatting tags get a bit more confusing. CSS is the standard format for most web browsers today.

Back in the late 1990s, when I learned how to use basic HTML, CSS wasn’t really used that often. That’s why most websites you would visit in those days were very simple and had very few style elements. CSS works with HTML to modify your blog post’s appearance and styling.

Underline is one of those oddball formatting tags that you would think would be covered by HTML, but is actually a CSS tag. To underline text, you will need to enter the following opening tag:

<span style=”text-decoration: underline;”>

Take note that you must include the quotation marks and other punctuation exactly as it appears. This includes the space between the colon and word “underline.” If you miss any part, the text won’t format properly. The closing tag for this CSS tag is </span>.

Think of CSS in this logical order. In plain English, you saying that you want to alter the “span” of text or text or media between the opening and closing tags and you want to change the “style.” To do this (the “=” sign), you want to change the “text” by adding a “decoration.” The decoration you would like to use is an “underline.”

Why we can’t use a simple tag that says <underline> or <u>, I’m don’t know. To bypass this code altogether, I use a keyboard shortcut. I simply highlight the text I want to alter and use CTRL+U on my Windows PC (CMD+U on Mac).

I only explained the above code because it helps you to understand the logic behind the code that appears in the text tab of your blog post.

The following are a list of common formatting tags that you may need for formatting blog posts. I also include keyboard shortcuts for these on the cheat sheet.

Creating Lists

Sometimes a good list can supplement and clarify your content, so it makes sense for bloggers to know the tags for lists.

There are two types of lists you can create using HTML, a bullet list, and numbered list. I will discuss the tags for each of these, as well as how to use them correctly.

List Items

Before I give you the tags for your list, I think it’s a good idea to go over list items first. Each item that you like to begin with a bullet or number must fall between the list item tags. The opening HTML tag for a list item is <li> and the closing tag is </li>.

If you are creating a list of flowers, for example, you would need to enter your HTML tags as seen below.

<li>Irises</li>

<li>Lilies</li>

<li>Roses</li>

Bullet List or Numbered List

To change your list items into bulleted or numbered items, you must enter your HTML opening tags before the list items and the closing tag afterthe list items.

The tags for a bullet list are: <ul></ul> and the tags for a numbered list are <ol></ol>. Once you use these, the HTML in the page should look like the following.

<ul>

<li>Irises</li>

<li>Lilies</li>

<li>Roses</li>

</ul>

If you enter the tags correctly on the text tab in the text editor, your text will appear as seen below.

Bullet List:

Irises
Lilies
Roses

Numbered List:

Irises
Lilies
Roses

Adding Links and Media to Blog Posts

Links and media, such as photos and graphics, are added to blog posts via HTML. Even thoug the text editor makes this easy, it is good to understand the code behind it.

Links are fairly simple. Prior to the text you wish to be the actual link, enter the following code: <a href=”http://url.com”>, but replace the http://url.com with your link. The easiest way to do this is to copy and paste the link straight from the browser bar and into the tag. To close the link, simply enter </a> after the text you wish the be part of the link.

Images can be very simple or more complex, depending on what you wish to be added to the image. To insert a plain Jane image with no additional changes, enter the following code: <img src=”http://image.url”> with the actual URL of your image in place of the http://image.url.

To find the URL of an image, go to the WordPress dashboard and click on “Media,” then click on the image. The first line to the right of the image, highlighted in gray is the URL of the image. This is the text you will need to copy and paste between the quotation marks of the above code.

There is no closing tag for an image.

Adding Alt Text

If you use Pinterest regularly, you may or may not be aware that the alt (or alternate) text is where your pin description comes from. You can manually add this to the image tag as well.

To do this, go back to the image tag and after the last quotation mark following the image URL, but before the pointy bracket, insert a space and enter: alt=”Enter Your Alt Text.” and enter the text you wish to include in place of the Enter Your Alt Text above.

For a Pinterest description, be sure to keep it under 500 characters and include keywords in the description. I go into much more detail about this in my post, “How to Create a Killer Pinterest Strategy for Your Blog.” This post also contains a link to download a free worksheet to help you create your pin description.

Hide Images

As a bonus, I will also reveal a useful tag that will help you hide any text or images in a post. This is useful when you wish to include multiple Pinterest Images in a single post. The CSS code you use to do this is:

<div style=”display: none;”>

Use this before the image tag and use the closing tag, </div> after the image tag. Make sure to include the closing tag! I accidentally made an entire post disappear recently by forgetting the closing tag. It’s an easy mistake. Just make sure to check your visual tab and Preview the post every time to avoid this mistake.