HTML Tutorial
HTML Attributes
- html-global-attributes
- html-event-attributes
HTML Tags List
HTML5 Advance
HTML API
HTML Color Names
- html-color-names
HTML Misc
MCQ
- html-mcq
Interview Questions
- html-interview-questions

How to Change Text Color in Html

In HTML, we can change the color of any text using the following different ways:

Using HTML tag
Using an Inline style attribute
Using internal CSS

1. Using HTML tag

Note: HTML 5 does not support the color attribute of font, so we have to use the inline style attribute and internal CSS options for changing the color of a text.

If we want to change the color of a text using Html tag which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the color of any text:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the Html tag.

     <!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the text color Using HTML tag
</Title>
</Head>
<Body> 
JavaTpoint   <br>
Html Tutorial   <br>
How to Change the Text Color in Html
</Body>
</Html>

    

Step 2: Now, move the cursor at the starting of that text whose color we want to change. And then, type the empty Html tag at that position.

Step 3: Then, we have to close the font tag at the end of the text whose color we want to change.

Step 4: Now, we have to add the attribute of the font tag whose name is "color". So, type the color attribute within the starting tag. And, then we have to give the color which we want to use on the text. So, type the name of color in the color attribute as described in the following block.

     <!Doctype Html>
<Html>   
<Head>    
<Title>   
Change the text color Using HTML tag
</Title>
</Head>
<Body> 
<font color="blue">
JavaTpoint   <br>
</font>
<font color="green">
Html Tutorial   <br>
How to Change the Text Color in Html
</font>
</Body>
</Html>

    

Test it Now

Step 5: And, at last, we have to save the Html code in the text editor and run the code. After execution, we will see the output in the browser. The following screenshot shows the output of the above Html Code:

2. Using an Inline Style attribute

If we want to change the color of a text using an inline style attribute which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the color of text.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the style attribute for changing the color of a text.

     <!Doctype Html>
<Html>   
<Head>    
<Title>   
Change color using style attribute
</Title>
</Head>
<Body> 
This page helps you to understand how to change the color of a text.
And, this section helps you to understand how to change the text color using the style attribute.
</Body>
</Html>

    

Step 2: Now, move the cursor at the starting of that text whose color we want to change. And then, type the inline style attribute within any element. Here, we use the

(paragraph) tag:

Step 3: In this step, we have to give a name of color as a value. We can give the color name in three forms:

We can type the name of a color
We can also enter the RGB value of a color
We can also enter the hexadecimal value of a color.

Step 4: Then, we have to close the element at the end of the text whose color we want to change.

Step 4: And, at last, save the Html code which changes the text color using the CSS style attribute.

     <!Doctype Html>
<Html>   
<Head>    
<Title>   
Change color using style attribute
</Title>
</Head>
<Body> 
<p style="color :red;">
This page helps you to understand how to change the color of a text.
</p>
<p style="color :pink; ">
And, this section helps you to understand how to change text color using style attribute. 
</p>
</Body>
</Html>

    

Test it Now

The output of the above code is shown in the following screenshot:

2. Using Internal CSS

If we want to change the color of a text using an internal cascading stylesheet which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the color of text.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the internal CSS for changing the color of a text.

     <!Doctype Html>
<Html>   
<Head>    
<Title>   
Change color using Internal CSS
</Title>
</Head>
<Body> 
This page helps you to understand how to change the color of a text.
In this Section, we used the internal CSS for changing the text color. 
</Body>
</Html>

    

Step 2: Now, we have to place the cursor in the head tag of the Html document and then define the styles inside the

Step 3: Now, we have to type the defined element selector before the text whose color we want to change.

<!Doctype Html> <Html> <Head> <Title> Change color using Internal CSS </Title> <style> Body { color:orange; } p { color:green; } </style> </Head> <Body> This page helps you to understand how to change the color of a text. <p> In this Section, we used the internal CSS for changing the text color. </p> </Body> </Html>
Test it Now
The output of the above Html code is shown in the following screenshot:

Next TopicHow to Change Background Color in Html

← prev next →