CSS color Property

CSS color property sets the color of text in HTML Element(s).

The syntax to specify a value for color property is

color: value;

The following table gives the possible values that could be given to color property.

ValueDescriptionExamples
colorAny valid CSS color value.color: red;
color: #f00;
color: rgb(25, 220, 85);
initialSets color to default value.color: initial;
inheritInherits color value from its parent element.color: inherit;

Examples

In the following examples, we apply color to text in HTML Element(s) using different types of allowed values for color property.

color property with CSS Color Values

In the following example, we apply color property to paragraphs with different kinds of CSS color values. Refer CSS Color Values tutorial.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-size: 25px;
        }
        #p1 {
            color: red;
        }
        #p2 {
            color: #00cf66;
        }
        #p3 {
            color: rgb(222, 119, 160);
        }
        #p4 {
            color: rgba(222, 119, 160, 0.5);
        }
        #p5 {
            color: hsl(250, 100%, 64%);
        }
        #p6 {
            color: hsla(250, 100%, 64%, 0.5);
        }
    </style>
</head>
<body>
    <p id="p1">Hello World</p>
    <p id="p2">Hello World</p>
    <p id="p3">Hello World</p>
    <p id="p4">Hello World</p>
    <p id="p5">Hello World</p>
    <p id="p6">Hello World</p>
</body>
</html>

color property for a few HTML elements

In the following example, we take a few HTML elements like h1, p, a, span, and pre, and set text/font color for these HTML elements.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1 {
            color: #3399ff;
        }
        p {
            color: #2a9a20;
        }
        a {
            color: #9515a9;
        }
        span {
            color: #ff33e7;
        }
        pre {
            color: #2da1ae;
        }
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <p>A paragraph.</p>
    <a href="#">Anchor Text</a>
    <p>A paragraph with a <span>span text</span>.</p>
    <pre>        pre
        hello
        world
    </pre>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about color property, and how to use this property for HTML Elements, with examples.