In this post, we will learn how to change text color in HTML. We have a lot of colors in HTML. Using these we can easily change the color of the text. If you want to know about all the colors, then you visit this link HTML Color Codes


How To Change Text Color in HTML ?


Change Text Color in HTML

We have many ways to change the color of a text in HTML. Mainly we have three methods. Which is as follows:


1. With Inline Style Attribute

This is the easiest way to change the color of any text in HTML. Under this, we can easily change the color of any text using the style attribute.

style Attribute Example: style="color:red;"

In the example below, we have changed the color of the heading and paragraph using the style attribute.


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

<h1 style="color:red;">CodexRadar</h1>
<p style="color:green;">Free Codes, Tutorials and News.</p>

</body>
</html> code-box


One important thing to note is that in HTML we can give the value of color in three ways:

  1. By typing the color name (color: red).
  2. By writing the hexadecimal value of the color (color: #FF0000).
  3. By typing the RGB value of the color (color: rgb(255, 0, 0))


2. With Internal Stylesheet

We can also change the color of any text through internal stylesheet. For this, we will change the color of any element we want to change by styling it.

For this, we see the example given below:


<!DOCTYPE html>
<html>
<head>
<title>How To Change Text Color in HTML ?</title>
<style>

h1 {
color: red;
}

p {
color: green;
}

</style>
</head>
<body>

<h1>CodexRadar</h1>
<p>Free Codes, Tutorials and News.</p>

</body>
</html> code-box

Thus, in the example given above, we see how we change the color of heading and paragraph using the internal stylesheet.


3. With External Stylesheet

Just as we have changed the color of heading and paragraph in the internal stylesheet, similarly we can also change the color through external stylesheet.


In the example below, we have linked an external stylesheet to the HTML document. In this external stylesheet, the color that we give to any element will be visible in the browser.


<!DOCTYPE html>
<html>
<head>
<title>How To Change Text Color in HTML ?</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>CodexRadar</h1>
<p>Free Codes, Tutorials and News.</p>

</body>
</html> code-box


External style.css stylesheet

h1 {
color: red;
}

p {
color: green;
} code-box


Thus, in the example given above, we see how we change the color of heading and paragraph using the external stylesheet.


Summary

In this post we learn how to change text color in HTML. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts. 

Post a Comment

Previous Post Next Post