Last Updated : 24 Jun, 2024
Summarize
Comments
Improve
The HTML font color attribute is used to specify the text color within the <font> tag. Although this method is deprecated in HTML5, it’s still important to understand its historical use. Modern HTML uses CSS for styling purposes, but let’s see how the font color attribute works.
color Attribute - GeeksforGeeks
Syntax:
<font color="color_name|hex_number|rgb_number">Attribute Values:
- color_name: It sets the text color by using the color name. For example: “red”.
- hex_number: It sets the text color by using color hex code. For example: “#0000ff”.
- rgb_number: It sets the text color by using rgb code. For example: “rgb(0, 153, 0)”.
Note: The <font> color attribute is not supported in HTML5. It is recommended to use CSS for setting text color in modern web development.
Example to Set Font Color in HTML
You can use the color attribute of the font tag to set a font color in HTML. You can assign a color value using a color name, hex code, or RGB code.
Let’s understand it better with example:
Example: In this example, we are getting the colored text by using the color attribute having three different types of values. We have used color name value, hex code value, and RGB code value to set the font color of three different text elements.
<!DOCTYPE html><html><head> <title> HTML | <font> color Attribute </title></head><body> <font size="6" face="verdana" color="green"> GeeksforGeeks! </font> <br> <font size="6" face="arial" color="#008000"> GeeksforGeeks! </font> <br> <font size="6" color="rgb(128, 128, 0)"> GeeksforGeeks! </font></body></html>
Output:
Although the font tag and its attributes are obsolete in HTML5, the above browsers still support them for backward compatibility. However, for modern web development, use CSS to style your text.
Modern Approach with CSS
To set font colors using CSS, you should use the style attribute or an external stylesheet.
<!DOCTYPE html><html><head> <title>Font Color Example with CSS</title> <style> .red-text { color: red; } .blue-text { color: #0000ff; } .green-text { color: rgb(0, 153, 0); } </style></head><body> <p class="red-text">This text is red using CSS class.</p> <p class="blue-text">This text is blue using CSS class.</p> <p class="green-text">This text is green using CSS class.</p></body></html>
Output:
While the <font> tag and its color attribute were useful in the past, modern HTML relies on CSS for styling. Understanding the historical context can help when dealing with legacy code, but using CSS is the best practice for current and future web development.
Supported Browsers
You can view the set font colors HTML using these browsers. The browsers support color attribute of font tag, and display the changes in text color.
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Improve
