To change the font-size and color in HTML, a style tag with color and font properties is used.
1. Using Inline Style Attribute
In this approach, a style attribute is used in the tag for which we want to change the font size and color. Below are the properties that we will use inside the style attribute.
- The text color is determined by the CSS color attribute.
- The font-size attribute in CSS determines the text size that will be displayed.
Syntax
<tagname style="property:value;"><h1 style="color:green;">Hello GeeksforGeeks.</h1>
<h2 style="color:green;">Hello GeeksforGeeks.</h2>
<h3 style="color:green;">Hello GeeksforGeeks.</h3>
<p style="color:green;">Hello GeeksforGeeks.</p>
Output
The font-size property in CSS determines the size of the text in an HTML element.
<h1 style="font-size:500%;">This is GeeksforGeeks.</h1>
<p style="font-size:300%;">This is GeeksforGeeks.</p>
Output
Example: This example combines the font size and color.
<h1 style="font-size:300%; color:green;">
This is GeeksforGeeks.
</h1>
<h2 style="color:green;">Hello GeeksforGeeks.</h2>
<h3 style="color:green;">Hello GeeksforGeeks.</h3>
<p style="color:green;">Hello GeeksforGeeks.</p>
Output
2. Using Internal CSS
If a single HTML page has a distinct style, an internal style sheet may be used. The internal style is defined within the head section's <style> tag.
Syntax
<style>
h1 {
property-name=property: value;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is GeeksforGeeks.</h1>
<p>This is GeeksforGeeks.</p>
</body>
</html>
Output
3. Using HTML <font> tag
Another way to change the font size and color is by using the <font> tag. Although its discarded, the HTML <font> tag can still be used and is required by some web services. The face attribute, which describes the font to be used, must be included when using the <font> tag.
Syntax
<font attribute="value"> Content </font>Note: Font tag is not supported in HTML5.
<font color="green">
<font size="7"> Welcome to GeeksforGeeks </font>
</font><br>
<font color="black">
Hi this is GeeksforGeeks learning. <br>
</font>
Output
