When I first started blogging, I knew absolutely nothing about web design.
That’s part of the reason that I decided to start my blog on WordPress: their service makes setting up your website super-simple, and you don’t have to worry about any of the behind-the-scenes coding that makes it all work.* When I wrote my first post directly into WordPress, it felt like I was using a word-processing program — I didn’t have to think overly hard about the formatting or styling or anything but the content of the post. Sure, I saw that I had the option to “Edit as HTML” if I wanted to, but I had never worked with code before, and I was more than happy to just ignore that option entirely.
This went on for almost a year. (Although I wasn’t blogging for the last half of it… see this post for more info about that!) Then, on a whim one day in December 2018, I decided that I wanted to design my mom a website to help her organize and manage her classroom library.** I signed up for an online “Intro to Web Design with Python” course and set about cramming as much HTML/CSS knowledge into my head as I possibly could. I never did finish implementing the website for my mom (it’s still in the works, though — don’t worry!), but I did learn a lot of really interesting web design techniques, and when I relaunched my blog at the end of January 2019, I realized that I could use all of that newfound knowledge to improve my WordPress site.
I’ve been using HTML and CSS to make my blog more aesthetic ever since, and today I wanted to share some of my formatting tips and tricks with you guys so that you can use them for your own blogs! I know the idea of learning to code can be kinda daunting, especially if you have no prior experience with or interest in computer science, but I’m here to tell you that it’s a lot more simple that you might think. So sit back, buckle up, and enjoy this crash course on how to use HTML and CSS to format posts and pages on your WordPress blog!
*Granted, there are dozens of other services out there that do the same thing when it comes to making web design easier, and there were definitely other reasons that I chose to go with WordPress, but this is still a huge benefit of having a WP blog!
**My mom’s a fifth-grade teacher, if you’re curious!
HTML Basics: Tags
According to Google’s dictionary, HTML is defined as “Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.” In layman’s terms, that means that HTML is the language used to format web pages so that they appear more or less the same across all different types of computers. Because WordPress takes care of most of the HTML that actually sets up the page — making your blog header appear in the right spot, for example, or setting up whatever menu bars you have on your blog — we’re only going to discuss the HTML that can be used to edit the “body” of a page, or the place where your blog post/content is showing up.*
At the base of all HTML code is what’s called a “tag.” Tags take the form of a string of letters enclosed by two triangle brackets, and they tell your Internet browser what each part of the web page is supposed to do. Usually, they come in pairs, meaning that you have to have one tag at the beginning and one tag at the end of whatever web page element you’re trying to format. On WordPress, for example, enclosing a line of text with <strong> and </strong> tags tells your browser to display that text as bold! (The backslash in the second tag is what denotes that it’s an ending tag rather than a starting tag.)
There are a TON of different HTML tags, but you’ll probably only end up using a few of them for your blog. Here’s a list of some of the most common tags and what they do:
- <a> and </a> allow you to turn whatever is inside the tags into a hyperlink to either a different webpage or another HTML element on your blog.
- <p> and </p> represent a paragraph block on WordPress; putting multiple paragraph blocks in a row will result in a bit of spacing in between each block.
- <ul> and </ul> allow you to make an “unordered” (meaning, with bullet points and not numbers) list.
- <ol> and </ol> allow you to make an “ordered” list, or one that uses numbers.
- <li> and </li> will let you create “list items” within either an ordered or unordered list, like in the following example:
- andwill create block elements that allow you to apply formatting to large chunks of your webpage all in one go.
- <span> and </span> will create in-line elements that allow you to apply formatting to one small part of an element.
- <strong> and </strong> will bold the text contained within the tags.**
- <em> and </em> will italicize the text contained within the tags.**
Some tags in HTML are special and don’t require end tags. These are referred to as HTML “elements,” and the two most common types for blog posts are the <img> tag (used to insert an image) and the <br> tag (used to represent a line break). If you accidentally give these tags end tags, it will break your code!
*If you want to design your own website from scratch, you’re going to need a bit more than that, but we’re focusing on WordPress for the sake of this post!
**These tags are WordPress specific; normally, <b> and </b> represents bold text, while <i> and </i> represent italics
HTML Basics: Attributes
Once you’ve gotten the hang of using tags in HTML, you’ll probably also need to add some attributes, which are used to provide a tag with more specific information about the job that it’s doing. Attributes are included in the opening tag of a line of code, and you can have as many of them as you need attached to a single tag. In fact, there are several tags that require additional attributes in order to work properly, like the <a> tag:
In the example above, the <a> tag was given the attribute href, which is used to tell the tag what website it’s going to be linking to. The attribute was defined by writing the name of the attribute, followed by an equals sign, followed by the value of the attribute (in this case, a link to the homepage of my blog) in double quotation marks. The result? “Click here,” which is the text that I put inside of the <a> and </a> tags, will link to my homepage when it’s clicked on!*
The <img> tag is another good example of this: it has two required attributes, src (used to provide a link to the picture the <img> tag will be displaying) and alt (used to define alternate text that will show up in case the image doesn’t). For instance, if I want to display a picture that’s saved in my WordPress Media Center, I would go to my WP-admin site and find the link to the picture there. I would then write the following code:
This would result in the following picture showing up in my post:
Of course, you’re probably thinking, “WordPress already lets me put images into my posts with an Image block, so why would I need to do this?” That’s a good point! I actually don’t recommend that you use HTML to circumvent WordPress if the tools to do what you need to do are already provided in the post editor. But there are some instances where you’ll want to use a picture in a way that WordPress doesn’t account for with its blocks… and in that case, you can use a custom HTML block and an <img> tag to get the effect you’re going for!
There are also certain attributes that you can add to any tag, regardless of what type it is. Two of the most common are class and id. These are really only helpful when they’re used in tandem with CSS files, which the free version of WordPress doesn’t allow you to do, but they will crop up in my Tips & Tricks section later on, so I wanted to mention them now!
*Note that this attribute is specific to the <a> tag and should not be used with non-hyperlink tags like <p> or <ul>.
Even though HTML and CSS are almost always mentioned together, they’re actually two different coding languages that have been integrated to the point where they seem like the same language. The difference between them is simple: while HTML is used to define and structure the content on your website, CSS allows you to add additional attributes that make your site look better aesthetically. For example, you’ll use an HTML <img> tag to insert an image on your website, but if you want to center it on the page, you’ll have to switch over to CSS!
Don’t start worrying about having to learn two coding languages, though — adding CSS to your HTML code is really simple, and the restrictions that the free version of WordPress puts on your ability to use CSS actually make it even simpler. Most HTML tags have an optional attribute known as style that’s specifically intended to hold CSS code. So, if I wanted to center the image that I inserted in the last section, I would do it like this:
I did have to enclose the <img> element in <div> tags because the text-align CSS attribute does not apply to the <img> tag,* but as you can see, the image is now centered! And all I did was add one small piece of code to the <div> tag: style=”text-align:center.” This is an example of how to write in CSS. Within the quotation marks that enclose the value of the HTML style attribute, insert your CSS code by using the following format: nameOfAttribute [colon] attributeValue. Don’t include any spaces. If you want to add another CSS attributes, just put a semicolon after attributeValue and follow this format again for the second attribute!
There are a TON of CSS attributes, just like there are a ton of different HTML tags. Some of the ones that I use the most often are text-align, background-color, font-family, and more. If you’re trying to achieve a certain formatting style and can’t figure out what CSS attributes you need, there are a lot of great resources online that can help you out!
*There are ways to center an image by adding CSS to the <img> tag, but for simplicity’s sake I decided to use a <div> instead.
Tips & Tricks
Now that I’ve broken down the basics of what HTML and CSS are and how they worked, I wanted to share some of my most-used tricks when it comes to formatting my blog. I’m definitely not a coding expert, but I designed my Post Archives landing page almost completely in HTML (if you go to look at it, I haven’t updated it in a bit, so just be aware haha), and I use these tricks almost every day when I’m writing my posts. Hopefully they can be of use to at least some of my fellow bloggers! 😀
#1: Changing the font size of just part of a paragraph
Have you ever been writing a post and wanted to make just one portion of a paragraph smaller (or bigger) than the rest… but then, when you highlight the text you want to change and adjust the font size, the whole paragraph changes size with it? This is something I’m surprised WordPress hasn’t come up with an easier workaround for yet, because it’s super annoying. Luckily, there’s an easy way to get around it with HTML. Remember above when I mentioned that the <span> tag is used to apply formatting to in-line elements? Using this tag and a little bit of CSS, you can change the font size of exactly the text you want and not a word more:
I want “the words in quotation marks” to be small!
As you can see, WordPress has a built-in CSS file that will assign any text with the has-small-font-size class to be smaller in size than the surrounding text, so that’s what I normally use. (Similarly, you can use has-big-font-size or has-huge-font-size to make your text bigger). But if you want more control over the font size, you can replace the class=”has-small-font-size” part of the code with style=”font-size:Xp” where the X is your font size of choice, and it will work just as well!
#2: Changing the font Style of your text
If you’ve ever wanted to have different fonts in your post, like I’ve been doing throughout this post to distinguish the code-y bits from the rest of my writing, this is the tip for you. Simply add style=”font-family:FONT_NAME” as an attribute of the <span> or <div> of your choosing,* where FONT_NAME is replaced with the name of the font you want, and voila! The font will change! For example, this is what I’m doing when I write text in the Courier font:
Now, this isn’t guaranteed to work with every font. Courier is a safe bet because it’s pretty ubiquitous on the Internet; you could probably also get away with Times New Roman and Calibri, which are just as well-known. Most other fonts, unfortunately, don’t work with this trick. If you’re curious as to what fonts you can use, check out this website for more information!
*WordPress doesn’t let you add this attribute to a <p> block, so use a custom HTML block and encase your text with <div> tags if you want to change the font of a whole paragraph. If you’re using <span>, you can just add it to a normal <p> block on HTML mode!
#3: Making a directory for your posts
You may have noticed that I included a Navigation bar at the top of this post with links that directed you to each of the post’s major sections. (If you didn’t, here’s a link up to it!) How did I get the links to jump to certain points on the page, you ask? With HTML, of course! 😀
Any HTML tag, regardless of its type, can be given an attribute called an id. The only requirement is that the value for this id be unique — only one HTML tag on your whole blog can have that exact id, else you won’t be able to link to it! So, to make my directory, I assigned each of the headings in this post an id that represented what that heading was about. For example, here’s the HTML for my first heading:
I then went to the paragraph block where I had my navigation bar written out, and instead of using the built-in link feature in WordPress, I manually added the link myself using the following code:
Instead of providing a URL as the href attribute, I just filled in the id that I assigned to the first heading, added the hashtag symbol in front of it, and boom! The resulting hyperlink, when clicked on, will cause the page to jump down to the HTML Basics: Tags heading. I just repeated the same process for the rest of the headings in this post, and I had a completed directory all ready to go.
And there you have it: you now know pretty much everything that you need to know in order to use HTML and CSS with the free version of WordPress! I hope I explained it in a way that wasn’t too confusing… I feel like I started rambling a bit in the earlier sections, haha. I do have a bunch more tips to share, but this post is getting long, so I think I’m going to end it here and leave the rest for a (potential) part 2.
If you have any questions regarding anything that I mentioned in this post, or you’re curious about how to implement a certain formatting style on your blog, don’t hesitate to comment on this post or reach out to me through social media. I love coding, and I’d love to help y’all out with any coding-related problems you might run into!