Web Design Basics – Styling Text Within a Post

Styling Text Within a Post

Have you ever been writing a post, and wished that you could make some small changes to the way it looked? Whether it’s the font a paragraph is written in or the colour of a certain word, making small adjustments can often take the visuals of a post to the next level. But most people just don’t have the basic skills for styling text or know how to go into their style files and make changes. Most people are worried about opening the file and accidentally making monumental changes or breaking code that will tear down their whole site. So, staying away from your style.css file is a good idea if you don’t know what you’re doing.

BUT, did you know that there is another way to make small changes to the appearance of your posts? You can actually add simple code to the text of the posts themselves that will make changes, without risking any of your site’s permanent design. Whether you want to change the font, the size, the colour, or anything else, the <span> tag is going to help you to start styling text.

Styling Text Within a Post

Where to Insert Code

If you’re using WordPress to write a post, you have the option of working in the Visual Editor or the Text(HTML) editor. Since the edits we are going to make are HTML snippets of code, you need to be working in the text editor to make these changes. Just like the code that you see when you insert a link or an image in the text editor, this code will be using things like angled brackets < > and simple text.

If you were to write a basic website from scratch, the HTML is the actual content of the site, for example, the text of this post. When you are working in the Text editor of WordPress, you are writing HTML (even though you might not know it) because you are editing the content of your site. That is why you see things like <a href> or <img> when inserting things like links and images – because that is HTML. Every time you hit enter and start a new paragraph there is a <p> tag entered, though WordPress hides it to keep things clean and simple. So, adding more HTML code to edit how things look is easy.

What Code Do I Insert?

The <span> tag doesn’t provide any visual change on its own, but gives you an area where you can insert style changes. It groups text together, and then applies the code to that ‘span’ or ‘area’.

<span> Starts the code
style Lets the computer know you are going to define some styles with CSS (colours, fonts, etc.)
</span> Ends the code

The correct syntax is:
<span style="STYLES HERE">TEXT HERE</span>

For example:

If I write <span style="color:blue">the text within the span will be blue</span>
If I write <span style="font-family:arial">the text within the span will be arial</span>
If I write <span style="font-size:20px">the text within the span will be size 20</span>

Of course, you won’t see the code in the body of your post – I’m just showing it to you with some internet magic. Instead it would just be within a paragraph or wherever you place it, and look like this the text within the span will be blue and the text within the span will be arial and the text within the span will be size 20.

What Options do I have?

There are endless styles you can add to your text, and you can Google whatever you want to do to see if it’s possible. W3Schools is a great resource with everything you need to know about CSS if you’re looking for one place to find all the code you need. Below are some of the basic in text stylings you might want to try off the bat, just to get the hang of it before you start fooling around. These are all codes you can use to edit the way the text itself looks, and can be applied to just one letter or an entire paragraph.

color: blue; (or any other standard colour)
color: #65DDD2; (or any other HEX colour)
font-size: 20px; (or any other px value – px means pixels)
font-size: 2em; (or any other em value – em means relative to the standard size)
font-family: arial; (or any other standard font)
font-family: bebas; (or any other custom font you have installed)
background-color: blue; (or any other standard colour)
background-color: #65DDD2; (or any other HEX colour

Can I Combine These Options?

So, what if you want to make text a different font AND a different colour? Simple! You add both pieces of code in the style section, and you just add a semicolon ; in between them. In CSS (when you are writing it in a separate style.css file) each style is written on a different line, and each line ends with a semicolon. This is the same thing, you are just putting them all on the same line.

These are just some of the most basic ways you can edit the way your posts look, if you don’t want to get into your stylesheet or deeper coding. You should never settle for a post that doesn’t look exactly how you want it to, especially when making changes is this simple. If you’ve got any specific changes you want to make to your text and can’t figure out how to do so, just ask! I’m glad to help you tweak and figure things out.

Do you ever use in text styling in your posts?

10 thoughts on “Web Design Basics – Styling Text Within a Post”

    1. Thanks Judy! I try and tailor all my tutorials for beginners but sometimes it’s so hard to step outside myself! Glad to know it’s easy to understand.

  1. Nice! You made it super easy to understand code and write out a few snippets that can make a blog post unique and attractive. Love this and am sharing with my wordpress friends!

Leave a Reply

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