CSS Color

The CSS color property defines the foreground color for an element.

Setting Color Property

The color property typically defines the color of the text content of an element.

For instance, the color property specified in the body selector defines the default text color (foreground color in general) for the whole page.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS color</title>
<style type="text/css">    
    body {
        color: #000000;
    }
    h1 {
        color: #ff0000;
    }
    p {
        color: #00ff00;
    }
</style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of CSS color</title>

body {

color: #000000;

}

h1 {

color: #ff0000;

}

p {

color: #00ff00;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Colors in CSS most often specified by the following methods:

a HEX value – like “#ff0000”
an RGB value – like “rgb(255,0,0)”
a color name – like “red”

Look at CSS Color Names for a complete list of possible color names.

Affect of Color Property on Borders and Oulines

The color property is not just for text content, but for anything in the foreground that takes a color value. For instance, if border-color or outline-color value hasn’t been defined explicitly for the element, the color value will be used instead.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS color</title>
<style type="text/css">
    p.one {
        color: #0000ff;
        border: 2px solid;
    }
    p.two {
        color: #00ff00;
        outline: 2px solid;
    }
</style>
</head>
<body>
    <p class="one">The border color of this paragraph is same as the element's text color.</p>
    <p class="two">The outline color of this paragraph is same as the element's text color.</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of CSS color</title>

p.one {

color: #0000ff;

border: 2px solid;

}

p.two {

color: #00ff00;

outline: 2px solid;

}

</style>

</head>

<body>

<p class="one">The border color of this paragraph is same as the element's text color.</p>

<p class="two">The outline color of this paragraph is same as the element's text color.</p>

</body>

</html>

Note:The 'color' property normally inherits the color value from their parent element, except the case of anchor elements.