An Inquiry Into Values
Length Values and thei Units Continued
|
| ||||
| ||||
|
|
URIs
Certain properties accept URIs as values. The notation used is the
letters url followed by the URL, quoted, in parentheses. Note
that although the letters url are used, you can specify a URL
or a URN (see Tutorial 2). We
haven't seen any properties that use URI values yet, but they are used
with the @import at-rule to import style sheets
from a URL. Here is an example of their usage:
@import url("/styles/colors.css"); BODY { background-image: url("http://www.foo.org/gifs/happyface.gif"); }
Color Units
Color units are used, as you've probably guessed already, to specify a color. There are two types of color units: keywords and numerical RGB specifications.
A keyword is just a color name. The proposed colors are:
- aqua
- black
- blue
- fuchsia
- gray
- green
- lime
- maroon
- navy
- olive
- purple
- red
- silver
- teal
- white
- yellow
Yes, teal.
Both Navigator and Explorer support some other colors as well, but it's good practice to restrict yourself to these colors only. For more specific colors, you can use RGB color specifications.
RGB color specifications specify a percentage of red, green and blue that makes a color. There are four different syntax types for RGB color specifications. The following example illustrates them.
P { color: #FF06A3; } DIV { color: #3F8; } /* equivalent to #33FF88 */ SPAN { color: rgb(100%,23%,65%); } A:link { color: rgb(255,0,127); }
The first syntax consists of a hash mark (#) followed by
three 2-digit hexadecimal numbers, each of these numbers specifying
the amount of red, green and blue to mix, in a range from 0 to 255
(FF). The second syntax uses single-digit numbers, and the digits are
doubled (3 becomes 33, A becomes AA etc.) to get the same range of
numbers, so #3F8 is equivalent to #33FF88, but
#FF06A3 cannot be specified using 3-digit notation.
The other two formats, which are usually easier to read, consist of
the letters rgb followed by three comma-separated numbers in
parentheses. These numbers are either percentages or integers from 0
to 255 that specify the amounts of red, green and blue.
The color property
| Property: | color |
| Accepted values: | A color value |
| Initial value: | Depends on User Agent |
| Applies to: | All Elements |
| Inherited: | Yes |
The color property is used to specify an element's
color. Note that this is only the color of the element's contents, not
the background color of the element.
<P><SPAN STYLE="color: red">I'm red</SPAN>, <SPAN STYLE="color: #E0DD06">I'm brown</SPAN> and <SPAN STYLE="color: rgb(0%,75%,0%);">I'm dark green</SPAN>.</P>
I'm red, I'm brown and I'm dark green.
Note that it is a bad idea to specify colors in your style sheet if you don't specify background colors as well. I haven't told you about background colors yet, and there's a reason for that. We'll get into them later on, in another tutorial. The reason it's a bad idea to specify text color without specifying background color is that the user agent or user style sheet might have a background color defined that makes your text hard or impossible to read. For instance, the user might want a green background, and when you specify you want green text, the text is the same color as the background and is invisible.
