Difference between revisions of "CSS GUIDE COLOR"
(→Summary) |
m |
||
| (36 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
== Summary == | == Summary == | ||
| − | The color property is used the set the text color for a given element. | + | The color property is used the set the text color for a given element. The text color of an element may also be referred to as the foreground colour. |
| − | <table border=" | + | <table border="0"> |
<tr> | <tr> | ||
| − | <td | + | <td><b>Applicability:</b></td><td>The color property can be used for all CSS elements.<td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | <td | + | <td><b>[http://developer.mozilla.org/en/docs/CSS:%40media#Media_groups Media Group:]</b> |
| + | </td><td>Visual</td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | <td | + | <td><b>Inherited:</b></td><td>Yes</td> |
</tr> | </tr> | ||
</table> | </table> | ||
== Syntax == | == Syntax == | ||
| − | + | <pre> | |
| + | TARGET_ELEMENT{color: #0033ff} | ||
| + | TARGET_ELEMENT{color: red} | ||
| + | TARGET_ELEMENT{color: rgb(0,200,0)} | ||
| + | </pre> | ||
| + | |||
== Legal Values == | == Legal Values == | ||
| − | + | Values can be entered in 3 ways: | |
| + | |||
| + | <table border="2"> | ||
| + | <tr> | ||
| + | <th>Method</th><th>Range</th><th>Example</th> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Hexadecimal (preferred)</td><td>#000000 - #ffffff</td><td>#00ff00 is green</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Color name</td><td>[http://www.w3schools.com/html/html_colornames.asp W3Schools Natural Langauge Color Names]</td><td>green</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>RGB value</td><td>0-255</td><td>rgb(102,204,102) is green</td> | ||
| + | </tr> | ||
| + | </table> | ||
| + | |||
| + | See [[#Usage Examples | usage examples]] section for more details. | ||
== Mozilla Recommended Values == | == Mozilla Recommended Values == | ||
== Usage Examples == | == Usage Examples == | ||
| + | <pre>p{color: #ff0000} /*Set paragraph text to appear red.*/</pre> | ||
| + | <pre>h1{color: #0000FF} /*Set h1 (level 1 heading) text to blue.*/</pre> | ||
| + | <pre>span{color: #0000FF} /*Sets text enclosed within span tag to appear yellow*/</pre> | ||
== Notes == | == Notes == | ||
| + | Please remember to use the appropriate U.S. English spelling i.e. color and not the U.K or Canadian english spellings to ensure your CSS works. | ||
| + | The [http://www.w3.org World Wide Web Consortium (W3C)] provides a free online [http://jigsaw.w3.org/css-validator/ CSS validation service]. | ||
== Specification Conformance == | == Specification Conformance == | ||
| + | *[http://www.w3.org/TR/CSS1#color CSS 1 ] | ||
| + | *[http://www.w3.org/TR/CSS21/colors.html#propdef-color CSS 2.1] | ||
| + | *[http://www.w3.org/TR/css3-color/#foreground CSS 3] | ||
== Browser Compatibility == | == Browser Compatibility == | ||
== See Also == | == See Also == | ||
| + | |||
| + | |||
| + | |||
| + | <big>[http://zenit.senecac.on.ca/wiki/index.php/CSS_guide#CSS_Properties Back to CSS Index]</big> | ||
Latest revision as of 18:05, 14 December 2006
This document is a work in progress and is subject to change.
Contents
Summary
The color property is used the set the text color for a given element. The text color of an element may also be referred to as the foreground colour.
| Applicability: | The color property can be used for all CSS elements. | |
| Media Group: | Visual | |
| Inherited: | Yes |
Syntax
TARGET_ELEMENT{color: #0033ff}
TARGET_ELEMENT{color: red}
TARGET_ELEMENT{color: rgb(0,200,0)}
Legal Values
Values can be entered in 3 ways:
| Method | Range | Example |
|---|---|---|
| Hexadecimal (preferred) | #000000 - #ffffff | #00ff00 is green |
| Color name | W3Schools Natural Langauge Color Names | green |
| RGB value | 0-255 | rgb(102,204,102) is green |
See usage examples section for more details.
Mozilla Recommended Values
Usage Examples
p{color: #ff0000} /*Set paragraph text to appear red.*/
h1{color: #0000FF} /*Set h1 (level 1 heading) text to blue.*/
span{color: #0000FF} /*Sets text enclosed within span tag to appear yellow*/
Notes
Please remember to use the appropriate U.S. English spelling i.e. color and not the U.K or Canadian english spellings to ensure your CSS works.
The World Wide Web Consortium (W3C) provides a free online CSS validation service.
