Length Values and thei Units Continued - An Inquiry Into Values - HTML with Style

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

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>

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.

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial8/
Created: Oct 30, 1998
Revised: Nov 4, 1998