Being able to style different aspects of your HTML page is an important skill for web designers and developers. To style your HTML web pages with font colors and sizes, you'll need to be familiar with CSS. To target font size specifically, you can use the CSS font-size property.
If you're looking for a way to change HTML font size using CSS, we have you covered. Let's dive in by starting with an introduction to the CSS font-size property.
Understanding the CSS font-size Property
The font-size property in CSS is handy when you need to change the size of HTML text. You can use this property to change the size of every piece of text on an HTML page or target specific elements to alter.
Targeting specific elements is usually recommended as you typically don't want everything to have the same size. Text that doesn't follow a visual hierarchy is hard to scan through and differentiate higher-level headings from low-level ones.
In simpler terms, don't abuse the font-size property. If you want a heading to stand out, there are different HTML heading tags for that. Check out our HTML essentials cheat sheet for different tags, attributes, and more along with explanations.
The CSS font-size property takes in two types of values: absolute and relative.
Absolute length values (i.e. px) are fixed while relative ones (e.g. em and ex) are flexible. For instance, for a font-relative unit like em, the size is usually determined by the parent element's font size. However, root-based font-relative units like rem are influenced by the root element's font size (<html>).
Each has its pros and cons, but in the essence of keeping things focused, we won't discuss them in this article.
How to Change the Font Size of an HTML Element in CSS
You can change the font size of HTML text by using some standard CSS syntax.
First, specify the selector (the text you wish to modify) and open some curly braces. Next, enter the font-size property followed by a colon, specify the specific size you want your HTML text presented in, and close it off with a semicolon.
Here's the syntax:
CSS selector {
font-size: value;
}
To get a better grasp on the concept, review the following HTML boilerplate that has a few additional lines of code (a heading and a paragraph):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is my first heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
If you want to change the font size of the paragraph element, you need to select it (via a class, tag, or id) and, using the CSS font-size property, set a custom value with your preferred units. In our example, we'll use pixels (px).
p {
font-size: 18px;
}
Although inline CSS is generally not advised in large projects, you can also use it to change the size of HTML text. Taking notes from the external CSS code above, we can implement the same thing inline like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is my first heading</h1>
<p style="font-size:18px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Text in the p HTML tag will now have a new custom size.
Troubleshooting Errors When Changing HTML Font Size in CSS
While the entire process of changing text size in CSS might seem easy, it may not always pan out exactly as you expect it to. If you experience issues, start by checking whether you saved the changes to your file (also, make sure you link your CSS sheet to your HTML file). If you did, try using the inline method, then refresh the page.
If it works, there might be an issue with your CSS code. Try using the !important tag, and if it works, there must be some conflicting code. Parse your CSS code line by line to try and catch that error.