html

How to change text color in html

Apart from giving a proper structure to the web content, assigning colors to the text is also significant. It not only enhances the look of the website but also helps users navigate through the content easily. Moreover, text colors can be used to represent important information that requires the users’ attention. Here we have summed up approaches using which you can change text color in HTML.

How to change text color using <font> tag

The <font> tag is used to change not only the text color but also the font size and the font face. This tag was used in previous versions of HTML and is depleted from HTML5. This is because using this tag makes the procedure of styling elements hectic. You have to specify this tag for every element for every other web page.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Change Text Color in HTML</title>
</head>
<body>

<font color="red">
<h1>Linux Hint</h1>
</font>
<font color="blue">
<p>Changing text color in HTML</p>
</font>

</body>

In the above code, we have defined an <h1> and <p> element and using the <font> tag the text color of the heading has been set to red, meanwhile, the text color of the paragraph is assigned blue color.

Output

The color of the text was changed successfully.

How to change text color using the style attribute

The approach that is preferred over using the <font> tag is the usage of the style attribute. This method is shown in the code given below.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Change Text Color in HTML</title>
</head>
<body>

<h1 style="color: purple;">Linux Hint</h1>
<p style="color: red;">Changing text color in HTML</p>

</body>

In the code snippet above, we are using the style attribute of each of the elements generated above. Using this attribute the text color of the heading was set to purple, whereas, the paragraph was given a red text color. This attribute gives an inline style to elements.

Output

The style attribute is working properly.

Following the approaches mentioned above, you can easily change the text color in HTML.

Conclusion

In order to change the text color in HTML either use the <font> tag or use the style attribute. The <font> tag is, however, deleted from HTML5 because using this tag makes the procedure of styling elements hectic. You have to specify this tag for every element for every other web page. Meanwhile, the style attribute gives an inline style to elements, therefore, this approach is preferred over the former.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.