Font color is used to enhance the visual appeal of the text content. It can be easily done using the CSS color property. This property is used to define the color of text within an HTML element.
How to Change the Font Color in HTML?
You can change the font color by using the CSS color property. This property accepts various color formats, such as named colors, hexadecimal colors, RGB values, or HSL values.
Example 1: In this example, we will use CSS color property to change the text color with inline CSS styles.
<!DOCTYPE html>
<html>
<head>
<title>
How to Change Font Color in HTML?
</title>
</head>
<body>
<p style="color: green;">
Welcome to GeeksforGeeks
</p>
<p style="color: #008000;">
Welcome to GeeksforGeeks
</p>
<p style="color: rgb(0, 128, 0);">
Welcome to GeeksforGeeks
</p>
<p style="color: hsl(120, 100%, 25%);">
Welcome to GeeksforGeeks
</p>
</body>
</html>
Output:
Example 2: In this example, we will use CSS color property to change the text color with internal CSS styles.
<!DOCTYPE html>
<html>
<head>
<title>
How to Change Font Color in HTML?
</title>
<style>
.text1 {
color: green;
}
.text2 {
color: #008000;
}
.text3 {
color: rgb(0, 128, 0);
}
.text4 {
color: hsl(120, 100%, 25%);
}
</style>
</head>
<body>
<p class="text1">Welcome to GeeksforGeeks</p>
<p class="text2">Welcome to GeeksforGeeks</p>
<p class="text3">Welcome to GeeksforGeeks</p>
<p class="text4">Welcome to GeeksforGeeks</p>
</body>
</html>
Output:
Change the Font Color in HTML4
In HTML4, we can use <font> tag along with color attribute to change the font color. The font tag is used to change the font color, size, and styles of the text in HTML4.
Note: The <font> tag is not supported in HTML5.
Example: This example explaines the use of <font> tag to change the font clor in HTML4.
<!DOCTYPE html>
<html>
<head>
<title>
How to Change Font Color in HTML?
</title>
</head>
<body>
<font color="green">
Welcome to GeeksforGeeks
</font><br />
<font color="#008000">
Welcome to GeeksforGeeks
</font><br />
<font color="rgb(128, 128, 0)">
Welcome to GeeksforGeeks
</font>
</body>
</html>
Output:
