Which CSS Property Is Used to Change the Text Color of an Element?

When it comes to styling websites, changing the color of text is one of the most basic yet essential tasks in CSS. Whether you’re designing a headline, paragraph, or button label, setting the right text color enhances readability, visual hierarchy, and brand identity.

In this blog, you’ll learn which CSS property is used to change the text color of an element, how to use it properly, and explore various color formats with practical examples.

Table of Contents

🎯 The CSS Property: `color`

To change the text color of an HTML element, you use the color property in CSS.

✅ Syntax:

selector {
  color: value;
}

selector is the HTML element you want to style.
value can be a color name, HEX code, RGB, HSL, or other valid CSS color formats.

🎨 Example 1: Basic Usage

🧾 HTML

<p class="highlight">This text will appear in red.</p>

💡 CSS

.highlight {
  color: red;
}

🌈 Supported Color Formats

Format	Example
Named color	`color: blue;`
HEX	`color: #3498db;`
RGB	`color: rgb(52, 152, 219);`
RGBA	`color: rgba(52, 152, 219, 0.8);`
HSL	`color: hsl(204, 70%, 53%);`

Each format offers flexibility depending on your design needs. For example, RGBA supports transparency, and HSL makes color adjustment more intuitive.

🧾 Example 2: Styling Multiple Elements

<h1 class="text-primary">Welcome</h1>
<p class="text-secondary">Learn CSS with confidence.</p>

.text-primary {
  color: #2c3e50;
}

.text-secondary {
  color: #7f8c8d;
}

💡 Pro Tip: Use Variables (with CSS Custom Properties)

:root {
  --primary-text: #333;
  --accent-text: #e74c3c;
}

h1 {
  color: var(--primary-text);
}

a {
  color: var(--accent-text);
}

This makes your color system easier to maintain and update.

🧠 Common Mistake to Avoid

Don’t confuse the color property with background-color.

color = text color
background-color = element’s background color

p {
  color: white;
  background-color: black;
}

📌 Conclusion

The CSS property used to change the text color of an element is:

color

It’s a simple but powerful tool in your CSS toolkit. By combining it with different color formats and variables, you can build clean, readable, and brand-consistent interfaces.

🎯 The CSS Property: color