Css style

How to Change HTML Font Size in CSS

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 colors and font sizes, you need to be familiar with CSS. To specifically target the font size, you can use CSS font size property.

If you’re looking for a way to change HTML font size using CSS, we’ve got you covered. Let’s dive in, starting with an introduction to CSS font size property.

Understanding the CSS font-size property

the font size The property in CSS comes in handy when you need to change the size of HTML text. You can use this property to change the size of each piece of text on an HTML page or target specific elements to change.

Targeting specific items is generally recommended because you generally don’t want everything to be the same size. Text that does not follow a visual hierarchy is difficult to navigate and to differentiate higher level headings from lower level headings.

In simpler terms, don’t abuse the font size property. If you want a header to stand out, there are different HTML header tags for that. See our HTML Essentials cheat sheet for various tags, attributes, etc., and explanations.

CSS font size The property takes two types of values: absolute and relative.

Absolute length values ​​(i.e. pixel) are fixed while relative ones (e.g. em and ex) are flexible. For example, for a police-related unit like em, the size is usually determined by the font size of the parent element. However, units relating to root-based fonts such as Rem are influenced by the font size of the root element ().

USE VIDEO OF THE DAY

Each has its pros and cons, but in the interest of staying 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 using standard CSS syntax.

First, specify the selector (the text you want to change) and open braces. Then enter the font size property followed by a colon, specify the specific size in which you want your HTML text to be presented and close it with a semicolon.

Here is the syntax:

CSS selector {
font-size: value;
}

To better understand the concept, review the following boilerplate HTML which contains a few additional lines of code (a title and a paragraph):







Simple HTML Page



This is my first heading


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.





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 CSS font size property, set a custom value with your preferred units. In our example, we’ll use pixels (pixel).

p {
font-size: 18px;
}

Although inline CSS is generally not recommended in large projects, you can also use it to change the size of HTML text. Taking notes on the external CSS code above, we can implement the same inline like this:







Simple HTML Page



This is my first heading


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.





Text in the p The HTML tag will now have a new custom size.

Related: Essential CSS Tips and Tricks Every Developer Should Know

Troubleshooting errors when changing HTML font size in CSS

While the whole process of changing text size in CSS might seem easy, it might not always go exactly as planned. If you’re having trouble, first check to see if you’ve saved the changes to your file (also make sure to link your CSS sheet to your HTML file). If so, try using the online method, then refresh the page.

If it works, there may be something wrong with your CSS code. Try using the !important tag, and if it works, there must be conflicting code. Analyze your CSS code line by line to try to detect this error.


css-code-in-10-minutes
10 Simple CSS Code Examples You Can Learn in 10 Minutes

Need help with CSS? Try these basic CSS code samples to get started, then apply them to your own web pages.

Read more


About the Author