CSS Text Color

The CSS Text Color property is used to change the color of text displayed on a webpage.

By using the color property, you can apply different colors to headings, paragraphs, links, buttons, and other text elements.

Text color plays an important role in:

Improving readability
Enhancing visual design
Highlighting important content
Creating a consistent color scheme

Syntax

CSS Text Color Syntax

css

selector {
    color: value;
}

CSS Text Color Example

css

h1 {
    color: blue;
}

This changes the color of all <h1> elements to blue.

Attributes

Property	Description	Example
color	Sets the text color	color: red;
color	Using HEX value	color: #ff0000;
color	Using RGB value	color: rgb(255, 0, 0);
color	Using HSL value	color: hsl(0, 100%, 50%);
color	Using transparent color	color: rgba(255, 0, 0, 0.5);

Example

CSS Text Color Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Text Color Example</title>
    <style>
        h1 {
            color: blue;
        }
        h2 {
            color: #ff6600;
        }
        p {
            color: rgb(0, 128, 0);
        }
        span {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Blue Heading</h1>
    <h2>Orange Subheading</h2>
    <p>This paragraph uses an RGB color value.</p>
    <p>This paragraph contains a <span>red highlighted text</span>.</p>
</body>
</html>

Output

Browser Output

css

The first heading will appear in blue color
The second heading will appear in orange color
The paragraph text will appear in green color
The highlighted text inside the paragraph will appear in red color

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Notes

The color property affects only the text color.
CSS supports color names, HEX, RGB, RGBA, HSL, and HSLA values.
Always ensure sufficient contrast between text and background colors for accessibility.
The color property is inherited by child elements unless overridden.
Use consistent colors throughout a website to maintain a professional appearance.

Conclusion

The CSS Text Color property allows you to control how text appears on a webpage. By choosing appropriate colors and maintaining good contrast, you can improve readability, accessibility, and the overall visual appeal of your website.

PreviousCSS Background Image NextCSS Text Alignment