Export (0) Print
Expand All
6 out of 11 rated this helpful - Rate this topic

color property

The foreground color of the text of an object.

CSS Color Module Level 3, Section 3.1

Syntax

color: <color>

Property values

color

A String that specifies or receives one of the color names or RGB values in the Color Table.

CSS information

Applies ToAll elements
Mediavisual
Inheritedtrue
Initial Valueblack

Standards information

Remarks

Some browsers do not recognize color names, but all browsers should recognize RGB color values and display them correctly.

An RGB color value normally consists of a "#" immediately followed by a triad of two-digit hexadecimal numbers specifying the intensity of the corresponding color: (R)ed, (G)reen, and (B)lue. For example, the color value "#FF0000" is rendered red because the red number is set to its highest value, "FF" (or "255", in decimal).

Each of the following style rules refer to the same color—namely, red. The three digit short-hand form is converted into the six digit form by replicating digits ("#F00" becomes "#FF0000"). The functional rgb() notation uses a comma-separated list of integer numbers from 0 to 255, or percentage values.


em { color: red }              /* natural language / CNS */
em { color: #F00 }             /* #RGB */
em { color: #FF0000 }          /* #RRGGBB */
em { color: rgb(1.0,0.0,0.0) } /* float range: 0.0 - 1.0 */
em { color: rgb(100%,0%,0%) ]  /* float range: 0.0 - 100.0 */

Windows Internet Explorer 9 introduced support for the RGBA, HSL, and HSLA color models.

Starting in Internet Explorer 9, the RGB color model has been extended to include an alpha channel, or transparency. The format of an RGBA value is rgba(red,green,blue,alpha). The red, green, and blue components are identical to those of the RGB color model, and are expressed as integers or percentages. The alpha component is expressed as a value between 0.0 (completely transparent) and 1.0 (completely opaque).

Hue-saturation-lightness (HSL) color values are supported starting in Internet Explorer 9. The format of an HSL value is hsl(hue,saturation,lightness). In the HSL color model, hue is defined as the indicated color's angle on the color wheel (for instance, red is "0" or "360", green is "120", blue is "240", and so on). Saturation and lightness are expressed as percentages.

The HSL color model can also be extended with an alpha channel. As with the RGBA model, the HSLA value's alpha channel is expressed as a value between 0.0 and 1.0. The format of an HSLA value is hsla(hue,saturation,lightness,alpha).

Examples

The following examples use the color CSS property and the color scripting property to change the text color of an object.

This example uses a call to an embedded (global) style sheet to change the text color to "red" when an onmouseover event occurs.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/color_h.htm


<style>
.color1 {
  color: red;
}
.color2 {
  color: ;
}
</style>
</head>

<body>

<span onmouseout="this.className='color2'" 
    onmouseover="this.className='color1'" 
    style="font-size: 14px">
...</span>


This example uses inline scripting to change the text color to red when an onmouseover event occurs. Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/color_s.htm


<span style="font-size:14" onmouseover="this.style.color='red'">
...
</span>

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
Color Table

 

 

Show:
© 2014 Microsoft. All rights reserved.