Value Syntax

The values of style sheet properties can be

• Strings, such as "Verdana" as a font family

• Color notation, such as #FF0000 or rgb(255,0,0)

• Lengths, such as 450px (pixels)

• Percentages, such as 80%

• URLs, with or without protocol and domain name

String Values

String values are seen mostly in lists of font families, such as

 body {        font-family: "Times New Roman"; } 

or

 body {        font-family: Verdana, Arial, Helvetica, sans-serif; } 

or

 body {        font-family: "Times New Roman", Times, serif; } 

In the first instance, you see a string containing multiple words with whitespace between them. This type of string must be surrounded by quotation marks. In the second instance, several strings are used as values but none is of the multiple-word variety, so no quotation marks are needed around any of the words. In the third instance, one value requires quotation marks and the others do not. All are valid representations of values.

Color Notation

Color is expressed in hexadecimal notation for RGB (red, green, blue) values. RGB values range from 0 to 255. After conversion to hexadecimal, the two-character value of each color is used to create the hexadecimal color code. For instance, pure red has a value of 255 red, 0 green, and 0 blue. Its hexadecimal notation becomes FF for red, 00 for green, and 00 for blue, or FF0000.

WEB RESOURCE

http://webmonkey.wired.com/webmonkey/reference/color_codes/

This web resource provides a chart of 216 standard colors, but you can convert any color you choose to hexadecimal values using a scientific calculator, your image editing program, or any of numerous RGB-to-hex calculators available online.

There are three common methods for representing color values in style sheets. In the following examples, pure blue is represented three different ways:

 body {        background-color: #0000FF; } 

and

 body {        background-color: #00F; } 

and

 body {        background-color: rgb(0,0,255); } 

In the first example, all six hexadecimal entries are used to represent the three colors: 00, 00, and FF. In the second example, only three characters are used because the hexadecimal notation includes values that are the same; if the hexadecimal notation for the color were ADC0DA, you could not use the three-character notation. Similarly, if the hexadecimal notation were AD00DA, you could not use the three-character notation because only one of the three colors (G or green) has a hex value with two identical characters.

Finally, the third example uses the RGB values themselves. In a value such as rgb(0,0,255), the first slot (0) represents zero red values, the second slot zero green values, and the third slot 255 blue values, which amounts to pure blue. Something like rgb(200,200,200) would produce a light gray, whereas something like rgb(170,170,255) would produce a pleasant periwinkle color.

NOTE

There are sixteen colors that may be referred to by name: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

No rule exists that says you must use the same notation throughout your style sheet, but try to do so for the sake of consistency within your work.

Lengths

The syntax for displaying length includes the number and the unit of measurement, with no whitespace between the two. For instance, 14px is a value length but 1.5 em is not. After you have committed that rule to memory, you're ready to tackle the numerous types of relative and absolute lengths you can use. Following are common lengths you will encounter:

• em is a relative length; its length is equal to the font height in use. For instance, if the font height is 10px, 1em is equal to 10px.

• px is a relative length, where 1px equals one pixel.

• in is an absolute length measured in inches.

• cm is an absolute length measured in centimeters.

• mm is an absolute length measured in millimeters.

• pt is an absolute length where 1pt equals 1/72 of an inch.

Working with absolute values can get pretty tricky because you control neither the size of the visible area of a user's web browser nor the resolution under which the display is made. Therefore, sticking to relative values offers greater flexibility for both you as the designer as well as your readers.

Percentages

Like length values, the syntax for displaying a percentage value includes the number and the percentage sign with no whitespace between the two. For instance, 75% is a value length but 35 % is not. All percentage values are relative. For instance, the following defines a level 1 heading as 200% of the base font size in use:

 h1 {        font-height: 200%; } 

Another common instance for the use of percentages is in the use of classes or IDs for <div> tags when you want to define the width of the block element as a certain percentage of the element in which it is contained (the body, another <div>, and so on):

 #halfDiv {        width: 50%; } 

URLs

The URL value is not used nearly as often as other types of values, but when used, it requires a specific syntax. Namely, the URL appears within a url() structure and must be quoted. For instance:

 body {        background: url("images/someimage.gif"); } 

In this example, the background of the body of the page will include a graphic found in the images directory, in a location relative to the style sheet source. With no leading forward slash or indicator to go up one directory level ("../"), it is assumed that the images directory is a subdirectory found in the same location as the style sheet itself.

You may also use the full URL, including protocol and domain name. For instance:

 body {        background: url("http://www.mydomain.com/images/someimage.gif"); } 

Of course, do not link to anything on an external web server unless you have permission to do so.