Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

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.

Windows Store apps using JavaScript support the RGB, RGBA, HSL, and HSLA color models.

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:
© 2015 Microsoft