This blog post is the seventh in a series of blogs for those who would like to know more about what is going on behind the scenes and try some basic HTML coding for themselves. Once you learn the basics of coding, you will find that it opens up many possible options for your content formatting. If you have not read the first post in this topic, you can find it here:
We highly recommend that you start with the first post in the series if you are new to HTML coding: Basic HTML Coding Options for WordPress
Changing Font Size with Basic HTML Coding
In a previous post, we discussed the use of “H” tags to create content headings. We noted that these “H” tags change the font size and weight. They are pre-styled options. They are great for stylizing your text as headings, but what if you want to make just take a section of text and make it a little larger? If it is not a heading, an “H” tag will not work.
How to Change Font Size?
The best way to change the size of the text is to use the “font-size” style element. In our last post we looked at adding color to your text. You use the “font-size” element in the same way you use the “color” element. Remember our color code example:
<p style=”color: #FF0033;”>This text will be a red color. </p>
To change the size, you can just change that code with a “font-size” element like this:
<p style=”font-size: 18px;”>This text will have a 18px font size. </p>
In this inline style example, the 18px designates and 18 pixel font size. All of the text in the “<p>” tag (paragraph) will have this size font.
Try plugging in different numbers (10px, 480px, etc.). You will get a feel for the different font sizes available. You can use any number.
It is as easy as that!
As an added bonus, here are a couple of examples with different combinations of inline styles.
<p style=”color:#ff0033; font-size: 18px;”>This text will colored red and have any 18px font size.</p>
Note in the code above that you can add as many style elements within the ‘style=””’ section as you would like. This example adds color and size elements to the paragraph.
<p style=”color:#FF0033;”>This text will be colored red with the default font size,
<span style=”font-size:18px;”>but this text will be red AND have an 18px font-size.</span></p>
With this code in example 2 you can mix the styles a bit. The entire paragraph will be red, but the portion contained in the “<span>” tag will be at a 18 pixel font size. By the way, the “<span>” tag is great for styling text without adding paragraph or line breaks.
Play around with the font-size and color elements and see what combinations you can create!