The text color in CSS allows you to define the color of the text within HTML elements. It plays a crucial role in the overall appearance and readability of your web page. Let’s explore how to use the color property to set the text color.

Syntax

The color property is applied to an HTML element and takes a color value as its parameter. Here’s the basic syntax:

selector {
  color: color;
}

The selector represents the HTML element(s) you want to target, and color specifies the desired text color. The color value can be specified using color names, hexadecimal notation, RGB or RGBA notation, or HSL or HSLA notation.

Examples

Using Color Names:

h1 {
  color: red;
}

p {
  color: blue;
}

Using Hexadecimal Notation:

h2 {
  color: #336699;
}

span {
  color: #FFA500;
}

Using RGB Notation:

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

li {
  color: rgb(0, 128, 0);
}

Using RGBA Notation:

.heading {
  color: rgba(0, 0, 255, 0.5);
}

.paragraph {
  color: rgba(255, 0, 0, 0.8);
}

Using HSL Notation:

.nav-link {
  color: hsl(120, 100%, 50%);
}

.footer-link {
  color: hsl(240, 100%, 50%);
}

Conclusion

The color property in CSS allows you to define the text color of HTML elements. By using color names, hexadecimal notation, RGB or RGBA notation, or HSL or HSLA notation, you can customize the text color and improve the readability and visual appeal of your web pages. Experiment with different colors to achieve the desired effects and create engaging designs that enhance the user experience.