Now that we’ve finished learning how to put comments in our HTML code, let’s now proceed to discuss modifying the font sizes of our content. As what we have previously discussed, the paragraph is the default content format in HTML. Each time a line or block of text falls outside of any tag, it is automatically given a paragraph format. As a good coding practice, however, we make sure that whenever we want to give any content a paragraph format, we put them in between an opening and closing paragraph tag; <p> and </p>.
Similar to HTML lists, we can also designate certain attributes to paragraph tags. One of these attributes is the style attribute. The style attribute allows you to change numerous aspects on the paragraph. These aspects include but are not limited to font size, font color, font family, text alignment, background color, etc.
Let’s go in-depth with the aforementioned aspects since these are essential and is commonly used when creating a website. First, let’s discuss how to change the font size using the style attribute. See the example HTML code below:
1<!DOCTYPE html>
2<html>
3<head>
4<title>First font size change</title>
5</head>
6<body>
7<p style="font-size: 10px"> This is a tiny text! </p>
8<p style="font-size: 20px"> This is a normal sized text!</p>
9<p style="font-size: 40px"> This is a big text!</p>
10</body>
11</html>
Looking at our example above, you can see that we have three paragraphs nested inside our body tag. They all have style attributes and each has a value for changing the font size. Attributes are always inserted in the opening tag of an element, as you can clearly see in our example, and you saw this in our previous examples with href in <a> and src in <img>.
To change the font size of a paragraph, insert the “style” attribute in the opening <p> tag. Give your style attribute a value equal to “font-size”, followed by a colon symbol “:”, the size of the font that you want, and a “px” at the end. The “px” stands for the graphical unit of measurement called pixels. Lines 7 through 9 clearly show how to change the font size of a paragraph into different sizes.