How to change the font size in HTML?
In this article, we will learn how one can change the font size in HTML. We can perform different approaches for changing the font size. We can use style attributes, for changing the font size. This can be achieved using the following approaches.
Approach 1: The <font> tag in HTML can be used for making changes to the font that is enclosed within the tags. It has various attributes that can be used to specify the size, color, or face of the font. This tag was deprecated in HTML5, therefore this approach may not work in modern browsers.
Syntax:
<font size="24">Your Text</font>
Example: In this example, we will use <font> tag.
HTML
<html><body> <!-- Using <font> tag to set font size --> <font size="6"> Welcome to GeeksforGeeks </font> <font size="24"> Aman Rathod </font></body></html> |
Output:
Approach 2: The <big> tag in HTML can be used for increasing the font size by one level that is enclosed within the tags. It does not have any attributes. This tag was deprecated in HTML5, therefore this approach may not work in modern browsers.
Syntax:
<big>Your Text</big>
Example: In this example, we will use the <big> tag
HTML
<html><body> <p> <!-- Using the <big> tag for increasing the font size --> Welcome to <big>GeeksforGeeks</big> </p></body></html> |
Output:
Approach 3: Using the inline style attribute to change the font-size of the tag it is used on. The usage of this attribute overrides any style set globally.
Syntax:
<p style="font-size: 24px;">Your Text</p>
Example: In this example, we will use inline style attribute.
HTML
<html><body> <!--- Using Inline style attribute to edit font size --> <p style="font-size:20px"> GeeksforGeeks </p> <p style="font-size:25px"> Courses </p></body></html> |
Output:
Approach 4: Using separate CSS to select the required text and using the font-size property to change the font size. The size value can be set using length units or keywords like x-small, small or large.
Syntax:
<style>
p
{
font-size: large;
}
</style>Example: In this example, we will use separate CSS.
HTML
<html><head> <!-- Using CSS to change the font size --> <style> body { font-size: 60px; } p { font-size: xx-large; } </style></head><body> Perfect Portal for Geeky <p>Welcome to GeeksforGeeks</p></body></html> |
Output:
Please Login to comment...