Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
HTML Font Size – How to Change Font Size in CSS?
If you don’t know how to change font size in CSS this post is for you. Styling or designing the different-different aspects is an important skill for a web developer. If you want to change the HTML font size in CSS, then you need to be familiar with the CSS. For targeting the font size, you can use the CSS font-size property.
If you want an example of how to change HTML font size in CSS, then don’t worry. Let’s introduce you to CSS font-size property first.
Let’s Understand the CSS font-size Property
The font-size property in CSS is very handy to use. According to your requirement, you can change the font size of HTML text using CSS. With this font-size property, you can change every piece of text on an HTML page.
When you want to have all elements have the same size then you can use this property to full <body> tag, but if you want to change the specific elements then target this and give them Font-size properties, like <h1>,<h2> tags, etc.
Don’t abuse the font-size property. If you want the heading looks different then use this property. Check out our HTML Cheat Sheet for understanding in detail about tags and Attributes with a full explanation.
The CSS font-size property takes two type values, which are Absolute and Relative.
Absolute value (i.e. px) is fixed, while Relative values (e.g. em and ex) are flexible. The font size unit like (em) is usually determined by the parent element’s font size. Some units are the root of the elements. Like (rem) is the root element of the <html> tag and its font size.
Each has Advantages as well as disadvantages, but essentially we keep the focus on understanding the font-size property, we won’t discuss them in this post.
How to Change Font Size in CSS?
Using the CSS syntax you can change the font size of your HTML text.
First, select the text which are you wish to modify. Then enter the font-size property and then add a colon. And specify the size then close with a semicolon.
Here’s the syntax
CSS selector {
font-size: value;
}
For a better understanding of this concept, in the HTML boilerplate add more lines additionally in the heading and paragraphs:
<!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 size of the paragraph or the group item, then you need to select it in the (via a class, tag, or id), and then add the CSS font-size property. Add the Custom value as your requirement in pixels (px).
p {
font-size: 20px;
}
Output:
Inline CSS is not advised in large projects. But for the beginner, you can use the some element. For the above CSS code, you can take the reference for understanding.
<!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 HTML <p> tag will now have a new custom size.
Solution of Errors When Changing HTML Font Size in CSS
While the process of changing text size is made easy, but it is not easy at every level as you expect it to be. When you change the file then this issue is maybe you face. That time make ensure that your CSS style sheet is linked to your main HTML file or not.
If you are using the inline CSS code then use the !important tag when you face this issue. And most of the try to don’t errors. If you get help with this post, how to change HTML font Size in CSS then you can also check out the other posts.
