Revision 20160 of color

  • Revision slug: CSS/color
  • Revision title: color
  • Revision id: 20160
  • Created:
  • Creator: McGurk
  • Is current revision? No
  • Comment Updated browser compatibility; 11 words added, 41 words removed

Revision Content

{{ CSSRef() }}

Summary

The color CSS property sets the foreground color of an element's text content.

  • {{ Xref_cssinitial() }}: depends on user agent
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

color: color       or        E.g. color : red;
color: inherit

Values

color
Is a {{ Xref_csscolorvalue() }} values for much details.

Examples

The following are all ways to make the element's text red:

element { color: red }
element { color: #f00 }
element { color: #ff0000 }
element { color: rgb(255,0,0) }
element { color: rgb(100%, 0%, 0%) }
element { color: hsl(0, 100%, 50%) }

/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5) } 
element { color: hsla(0, 100%, 50%, 0.5) }

Specifications

Specification Status Comment
CSS Colors Level 3 {{ Spec2('CSS3 Colors') }} No direct change, though the {{ xref_csscolorvalue() }} data type has been greatly extended.
CSS 2.1 {{ Spec2('CSS2.1') }} No  change.
CSS 1 {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 3.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1") }} 6.0 6.0 1.0

See also

  • The {{ Xref_csscolorvalue() }} data type

{{ HTML5ArticleTOC() }}

{{ languages( { "de": "de/CSS/color", "es": "es/CSS/color", "fr": "fr/CSS/color", "ja": "ja/CSS/color", "pl": "pl/CSS/color" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The <code>color</code> CSS property sets the foreground color of an element's text content.</p>
<ul> <li>{{ Xref_cssinitial() }}: depends on user agent</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Percentages: N/A</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h2>Syntax</h2>
<pre>color: <em>color</em> <em>      or        E.g. </em>color : red;
color: inherit
</pre>
<h3>Values</h3>
<dl> <dt><em>color</em></dt> <dd>Is a {{ Xref_csscolorvalue() }} values for much details.</dd>
</dl>
<h3>Examples</h3>
<p>The following are all ways to make the element's text red:</p>
<pre class="brush: css">element { color: red }
element { color: #f00 }
element { color: #ff0000 }
element { color: rgb(255,0,0) }
element { color: rgb(100%, 0%, 0%) }
element { color: hsl(0, 100%, 50%) }

/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5) } 
element { color: hsla(0, 100%, 50%, 0.5) }
</pre>
<h2>Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-color/#foreground" title="http://www.w3.org/TR/css3-color/#foreground">CSS Colors Level 3</a></td> <td>{{ Spec2('CSS3 Colors') }}</td> <td>No direct change, though the {{ xref_csscolorvalue() }} data type has been greatly extended.</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#colors" title="http://www.w3.org/TR/CSS21/colors.html#colors">CSS 2.1</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td>No  change.</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS1/#color" title="http://www.w3.org/TR/CSS1/#color">CSS 1</a></td> <td>{{ Spec2('CSS1') }}</td> <td> </td> </tr> </tbody>
</table>
<h2 name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>{{ CompatGeckoDesktop("1") }}</td> <td>3.0</td> <td>3.5</td> <td>1.0</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>{{ CompatGeckoMobile("1") }}</td> <td>6.0</td> <td>6.0</td> <td>1.0</td> </tr> </tbody> </table>
</div><h2>See also</h2>
<ul> <li>The {{ Xref_csscolorvalue() }} data type</li>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "de": "de/CSS/color", "es": "es/CSS/color", "fr": "fr/CSS/color", "ja": "ja/CSS/color", "pl": "pl/CSS/color" } ) }}</p>
Revert to this revision