Section A.1. CSS Values | Dreamweaver CS3: The Missing Manual

A.1. CSS Values

Every CSS property has a corresponding value. The color property, which formats font color, requires a color value to specify which color you want to use. The property color: #FFF ; creates white text. Different properties require different types of values, but they come in four basic categories: colors, lengths and sizes, keywords, and URLs.

A.1.1. Colors

You can assign colors to many different properties, including those for font, background, and borders. CSS provides several different ways to specify color.

A.1.1.1. Keywords

A color keyword is simply the name of the color, like white or black . There are currently 17 recognized color keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow . Some browsers accept more keywords, and CSS 3 promises to offer many more in the future (http://www.w3.org/TR/css3-color/).

A.1.1.2. RGB values

Computer monitors create colors using a mixture of red, green, and blue light. These RGB values can create (nearly) the full spectrum of color. Almost every design, illustration, and graphics program lets you specify colors using RGB, so it's easy to transfer a color from one of those programs to a CSS property. CSS represents RGB values in several ways:

Hex values . The method most commonly used on the Web for identifying color, hex color values consist of three two-character numbers in the hexadecimal (that is, base 16) system. # FF0033 represents an RGB value composed of red (FF, which equals 255 in normal, base 10 numbers), green (00), and blue (33). The # tells CSS to expect hex numbers ahead, and it's required. If you leave off the #, a Web browser won't display the correct color.

Tip: If all three two-digit values have repeated digits, you can shorten the hex value by using just the first number of each pair. For example #361 means the same thing as #336611.
RGB percentages . You can also specify a color using percentage values, like this: rgb(100%, 0%, 33% ). You can get these numbers from image editing and design programs that can define colors using percentages (which is most of them).
Decimal values . Finally, you can use decimal RGB values to specify a color. The format is similar to the percentage option, but you use a number from 0 to 255 to indicate each color: rgb(255, 0, 33) .

It doesn't matter which method you usethey all work. For consistency's sake, you should pick one way of specifying RGB values and stick with it. The Windows and Mac operating systems both have color pickers which let you find the perfect color from a palette of millions, and then show you the RGB value. Alternatively, you can use this free online color picker: www.ficml.org/jemimap/style/color/wheel.html.

Tip: Many Mac programs such as TextEdit, let you open the color picker by pressing

-Shift-C.

A.2.1. Lengths and Sizes

CSS provides many different ways to measure the size of type, the width of a box, or the thickness of a borderline. To indicate type size , you can use inches, picas, points, centimeters, millimeters, em-heights, ex-heights, pixels, and percentages. However, even though there are a lot of options, most don't apply to the world of onscreen display, for reasons discussed in Section 6.2. You really need to think about these three only pixels, ems, and percentages.

A.1.2.1. Pixels

A pixel is a single dot on a computer screen. Pixels give you a consistent method of identifying lengths and font sizes from computer to computer: 72 pixels on one monitor is 72 pixels on another monitor. That doesn't mean the actual, real-world length is the same for everyone, though. Since people set their monitors to different resolutions800 x 600, 1024 x 768, 1600 x 1200, or whatever72 pixels may take up 1 inch on one monitor, but only half an inch for someone else. Nevertheless, pixels give you the most consistent control over presentation.

Note: There's just one drawback to using pixels: folks using Internet Explorer 6 or earlier can't resize any type that's sized using pixels. If your text is too small for someone's eyes, the visitor won't be able to enlarge it to make it more readable. (See Section 6.2.2 for more on pixel measurements.)

A.1.2.2. Ems

Originally from the typographic world, an em is a unit that represents the height of the capital letter M for a particular font. In Web pages, one em is the height of the Web browser's base text size, which is usually 16 pixels. However, anyone can change that base size setting, so 1em may be 16 pixels for one person, but 24 pixels in someone else's browser. In other words, ems are a relative unit of measurement.

In addition to the browser's initial font size setting, ems can inherit size information from containing tags. A type size of .9em would make text about 14 pixels tall on most browsers with a 16 pixel base size. But if you have a tag with a font size of .9ems, and then a tag with a font size of .9ems inside that tag, that tag's em size isn't 14 pixelsit's 12 pixels (16 x .9 x .9). So keep inheritance in mind when you use em values.

A.1.2.3. Percentages

CSS uses percentages for many different purposes, like sizing text, determining the width or height of an element, and specifying the placement of an image in the background of a style, to name a few. Now, what you're taking a percentage of varies from property to property. For font sizes, the percentage is calculated based on the text's inherited value. Say the general font size for a paragraph is 16 pixels tall. If you created a style for one special paragraph and set its font size to 200 percent, that text is displayed at 32 pixels tall. When applied to width, however, percentages are calculated based on the width of the page, or on another parent element with a set width. You specify a percentage with a number followed by the percent sign: 100% .

A.1.3. Keywords

Instead of color or size, many properties have their own specific values that affect how the properties display and are represented by keywords. The text-align property, which aligns text on screen, can take one of four keywords: right, left, center , and justify . Since keywords vary from property to property, read the property descriptions that follow to learn the keyword appropriate to each property.

One keyword, however, is shared by all properties inherit . This keyword lets you force a style to inherit a value from a parent element. You can use the inherit keyword on any property. This keyword gives you the power to make styles inherit properties that aren't normally inherited from parent tags. For instance, say you use the text-decoration property to underline a paragraph. Other tags, such as and , inside the tag don't inherit this value, but you can force them to do so with the inherit keyword:

 em, strong {     text-decoration: inherit; }

That way, the em and strong tags display the same text-decoration value as their parent tagunderline, in this case. So the and elements of the paragraph each get underlined as does the entire paragraph so you'd end up with double underlines under emphasized text (a good reason why that property isn't inherited normally). If you change the tag's text-decoration value to overline instead of underline, the and tags inherit that value and display overlines, too.

Note: Underline/overline isn't a very useful example, mainly because inherit isn't a very useful value. But this wouldn't be a Missing Manual if it didn't give you all the facts.

A.1.4. URLs

URL values let you point to another file on the Web. For example, the background-image property accepts a URLthe path to the file on the Webas its value, which lets you assign a graphic file as a background for a page element. This technique is handy for adding a tiling image in the background of a page or for using your own graphic for bulleted lists (see Section 8.2).

In CSS, you specify an URL like this: url(/books/2/835/1/html/2/images/tile.gif) . A style that adds an image called tile.gif to the background of the page would look like this:

 body { background-image: url(/books/2/835/1/html/2/images/tile.gif); }

Unlike HTML, in CSS, quotes around the URL are optional, so url(/books/2/835/1/html/2/images/tile.gif), url(/books/2/835/1/html/2/images/tile.gif) , and url(/books/2/835/1/html/2/images/tile.gif) are equivalent.

Note: The URL itself is just like the HTML href attribute used for links, meaning you can use an absolute URL like http://www.missingmanuals.com/images/tile.gif, a root-relative path like / images/tile.gif , or a document-relative URL like ../../ images/tile.gif . See Section 8.3 for the full story on these kinds of paths.