How to Set the Text Color in CSS

When designing a website, one of the most important elements to consider is the color scheme.

The text color is particularly important, as it needs to be legible and easy to read.

In this CSS tutorial, we will go over how to change the text color in CSS.

CSS Text Color Property

The CSS property for text color is “color.”

This property is used to specify the color of text in an HTML element.

The value of the color property can be set using a color name, a hex code, or an RGB value.

Examples of Setting Text Color in CSS:

Using a Color Name:

p {
  color: blue;
}

In this example, all the text within the <p> element will be blue.

Using a Hex Code

h1 {
  color: #ff0000;
}

In this example, all the text within the <h1> element will be red. The hex code “#ff0000” is the code for red.

Using an RGB Value

a {
color: rgb(0, 255, 0);
}

In this example, all the text within the <a> element will be green. The RGB value “rgb(0, 255, 0)” is the code for green.

Changing Text Color on Hover

You can also change the text color when a user hovers over the text using the :hover selector.

a:hover {
  color: purple;
}

In this example, when a user hovers over a link, the text color will change to purple.

Conclusion

Changing the text color in CSS is a simple task that can greatly improve the design of your website.

By using the “color” property, you can easily change the text color of any HTML element.

Further, you can use the :hover selector to change the text color when a user hovers over the text.

With these techniques, you can create a visually appealing and easy-to-read website.