CSS color PropertyS2C Home « CSS color Property
Definition
The CSS color property allows us to assign a foreground colour to text.
Applies To
All elements.
Property Values
color - Defines a color for the elements text.
Valid values for color keywords are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy olive, orange, purple, red silver, teal, white and yellow.
Colours can also be expressed using hex notation or rgb formats.
inherit - The color properties are inherited from the parent element.
Default Value
Default value is dependant upon the user agent.
Inheritance
The color property is inherited from the parent element if none is applied to the current element.
Browser Anomalies
IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.
Example
<!DOCTYPE html>
<!-- Our HTML/CSS for the CSS color property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS color Property</title>
<!-- Valid values for CSS color Property are:
color and inherit.
-->
<style type="text/css">
/* Colour h1 headings red */
h1 {
color: red;
}
/* Colour h2 headings blue */
h2 {
color: blue;
}
/* Colour h3 headings teal */
h3 {
color: teal;
}
/* Colour paragraphs purple */
p {
color: purple;
}
</style>
</head>
<body>
<h1>We Are Colouring This h1 Heading Text Red</h1>
<p>All paragraphs will be coloured purple.</p>
<p>All paragraphs will be coloured purple.</p>
<h2>We Are Colouring This h2 Heading Text Blue</h2>
<p>All paragraphs will be coloured purple.</p>
<p>All paragraphs will be coloured purple.</p>
<h3>We Are Colouring This h2 Heading Text Teal</h3>
<p>All paragraphs will be coloured purple.</p>
<p>All paragraphs will be coloured purple.</p>
</body>
</html>
How It Looks
The results of using the color property with the values above will look something like the following:
Homepage
Top