Change the HTML Text color is very easy. Actually, the text is a common word but in HTML, you have to use it HTML Font Color change. Because of the font keyword used for any style, color, size word used in CSS to change on TEXT. So remember it any change in text color in HTML used a “Font Keyword” property.
But “Font” is also a Tag in HTML. Which can use any content type tag.
Don’t confuse will with Font And Text we will discuss completely everything in this tutorial.
Syntax
A simple syntax of html font color.
<font color=”color_name|hex_number|rgb_number“>
A html text color syntax.
<tagname style=”property:value;“>
Example | HTML “Font” color codes
Font tag can be use with any tag to change the color of text. See the below code example how to do it.
First we are using a <p> and then inside it use <font> tag. First HTML font color is red and next is blue color text. Where color=”red” is an attribute of <font> element.
Note: If color attribute of <font> is not supported in HTML5 then Use CSS.
<html>
<body>
<p><font color="red">A Red color text</font></p>
<p><font color="blue">A Blue color text</font></p>
<p>If thix color attribute is not supported in HTML5 then Use CSS.</p>
</body>
</html>
Output:
Example | HTML text color codes
Use Style Attribute with Color Property in text content tags like <h1>, <p> etc. In color property, there is 3 option to change the text color in HTML. See below example changing the color with color_name value.
<html>
<body>
<h2 style="color:blue;">This is a heading</h2>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>Output:
Color Attribute Values
A below type of value you can add in color attribute when changing a text color in HTML.
| Value | Description |
|---|---|
| color_name | Set the text color with a color name (like “red”) |
| hex_number | set the text color with a Hex code (like “#ff0000”) |
| rgb_number | set the text color with an RGB code (like “rgb(255,0,0)”) |
Let’s see an example of how we can add the value in color attribute different ways.
<html>
<body>
<h3 style="color:blue">Color Name</h3>
<h4 style="rgb(095,4,1)">Color Name</h4>
<p style="color:#3f8090">Hex code</p>
</body>
</html>Output:
How to change HTML font color with CSS
The upper example is used inline CSS, you can do the same thing with Internal/External CSS. Let’s see the example for internal CSS.
<html>
<style>
#heading{
color:blue;
}
#para{
color:red;
}
</style>
<body>
<div>
<h2> <font id="heading">This is a heading<font></font></font></h2>
<p> <font id="para">This is a paragraph <font></font></font></p>
<div>
</div></div></body>
</html>HTML text color CSS | Style
Same as above example and it is recommend ways to do the style and color change of text in HTML.
See below example of html text color style code.
<html>
<style>
#heading{
color:blue;
}
#para{
color:red;
}
</style>
<body>
<div>
<h2 id="heading">This is a heading</h2>
<p id="para">This is a paragraph.</p>
<div>
</div></div></body>
</html>Interview Question: This tutorial can be your interview question like – How to change text color in HTML? OR HOW to change font color in HTML?
Q: Which HTML text color tag is used for change text(Paragraph, Sentence, Heading etc) color.
Answer: A <font> tag
<p><font color=”color_name“></P>
Do comment if you have any doubt and suggestions on this tutorial.
Note: The changeHTML Text/Font Color Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version