How to Set Text Color in CSS: Simple Guide with Examples

To set text color in CSS, use the color property followed by a color value like a name, hex code, or RGB. For example, color: red; changes the text color to red.

Syntax

The color property in CSS sets the color of the text inside an element. You write it inside a CSS rule with a selector, then specify the color value.

• Selector: The HTML element or class you want to style.
• color: The property that changes text color.
• Value: The color you want, such as a color name, hex code, or RGB.

css

selector {
  color: value;
}

Example

This example shows how to set the text color of a paragraph to blue using the color property.

css

p {
  color: blue;
}

Output

A paragraph with blue text on a white background.

Common Pitfalls

Common mistakes when setting text color include:

• Using incorrect property names like text-color instead of color.
• Forgetting to specify a valid color value.
• Setting color on an element but having another CSS rule override it.
• Using colors that are hard to read due to low contrast with the background.

css

/* Wrong: property name is incorrect */
p {
  text-color: red; /* This does nothing */
}

/* Correct: use 'color' property */
p {
  color: red;
}

Quick Reference

Color Value Type	Example	Description
Named Color	color: red;	Common color names like red, blue, green.
Hex Code	color: #ff0000;	Hexadecimal color codes starting with #.
RGB	color: rgb(255, 0, 0);	Red, green, blue values from 0 to 255.
RGBA	color: rgba(255, 0, 0, 0.5);	RGB with transparency (alpha).
HSL	color: hsl(0, 100%, 50%);	Hue, saturation, lightness values.

Key Takeaways

Use the CSS property color to change text color.

Specify colors by name, hex code, RGB, RGBA, or HSL values.

Avoid incorrect property names like text-color.

Ensure good contrast between text and background for readability.

Later CSS rules can override earlier color settings, so check your styles.