How to change text color in CSS

To change the text color in CSS, you can use the color property. The color property allows you to set the color of text content within an HTML element. Here’s an example:

HTML:

<p class="custom-text">This is some text with a custom color.</p>

CSS:

.custom-text {
  color: #ff0000; /* Replace with your desired color */
}

In this example, we have a paragraph element with the class “custom-text.” We target this element in CSS using the class selector .custom-text and use the color property to change the text color to red (#ff0000).

You can use any valid CSS color value for the color property, such as color names, hexadecimal values, RGB values, or HSL values. For example:

.custom-text {
  color: blue; /* Color by name */
}

.custom-text {
  color: #00ff00; /* Color by hexadecimal value (green) */
}

.custom-text {
  color: rgb(255, 0, 255); /* Color by RGB value (magenta) */
}

.custom-text {
  color: hsl(240, 100%, 50%); /* Color by HSL value (blue) */
}

You can apply the color property to different HTML elements or use specific class or ID selectors to target specific parts of your webpage and change the text color accordingly. Remember that text color changes may affect the overall visual design and readability of your content, so choose colors that align with your design goals and ensure good contrast with the background.