CSS Attributes Index Color and Background Attributes
Sets or retrieves the color of the object’s text.
CSS |
{ color : strColor } |
Script |
object.style.color = strColor ] |
strColor |
String that specifies one of the color names or red-green-blue ( RGB ) values in the Color Table. Note Specifying the color as a color name may not be recognized by some browsers, whereas the RGB color value should always be displayed accurately. |
The property is read/write with no default value; the CSS attribute is inherited.
The following are different ways to specify the same color, which in this example is blue.
// color name
em { color: blue }
// #RGB
em { color: #00f }
// #RRGGBB
em { color: #0000ff }
// RGB functional notation 0-255
em { color: rgb ( 0,0,255 ) }
// RGB functional notation 0-100%
em { color: rgb ( 0,0,100% ) }
The following example allows a user to preview various text and background color combinations.
Show me
The following examples demonstrate use of inline event handlers to dynamically set an element’s text color. Both methods yield the same effect.
The sample below defines color style attributes in an embedded stylesheet, and invokes calls to the stylesheet to change the text color in response to mouse events.
<style>
.color1 { color: darkgreen }
.color2 { color: maroon}
</style>
...
<p onmouseover="this.className='color1'"
onclick="this.className='color2'"
onmouseout="this.className=''">
...
</p>
Show me
The sample below uses inline event handlers to dynamically change an object’s text color in response to mouse events.
<p onmouseover="this.style.color='#997'"
onclick="this.style.color='#687'"
onmouseout="this.style.color=''">
...
</p>
Show me
background-color Colors and Backgrounds