html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS color property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 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:

notepad
CSS clip    << Prev          Next >>   CSS content

go to home page Homepage go to top of page Top



CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.