HTML, XHTML, and CSS, Sixth Edition

2017-07-07 02:10:07

A Property's Value

Each CSS property has different rules about what values it can accept. Some properties only accept one of a list of predefined values. Others accept numbers, integers, relative values, percentages, URLs, or colors. Some can accept more than one type of value. While the acceptable values for each property are listed in the section describing that property (mostly in Chapters 10 and 11), I'll discuss the basic systems here.

Inherit

You can use the inherit value for any property when you want to explicitly specify that the value for that property be the same as that of the element's parent.

Predefined Values

Most CSS properties have a few predefined values that can be used. For example, the display property can be set to block, inline, list-item, or none. In contrast with (X)HTML, you don't need to and indeed must not enclose predefined values in quotation marks (Figure 7.11).

Figure 7.11. Many CSS properties will only accept values from a predefined list. Type them exactly and do not enclose them in quotation marks.

Lengths and Percentages

Many CSS properties take a length for their value. All length values must contain a quantity and a unit, with no spaces between them, for example, 3em or 10px (Figure 7.12). The only exception is 0, which may be used with or without units.

Figure 7.12. Lengths must always explicitly state the unit. There should be no space between the unit and the measurement.

There are length types that are relative to other values. An em is usually equal to the element's font-size, so 2em would mean "twice the font-size". (When the em is used to set the element's font-size property itself, its value is derived from the font size of the element's parent.) The ex should be equal to the font's x-height, that is, the height of a letter x in the font, but it's not well supported.

Pixels (px) are relative to the resolution of the monitorthough not to other style rules. Most monitors these days display about 80 pixels to the inch (though they range from 72 to 96 pixels to the inch), so 16 pixels is about 1/5 of an inch high (or 0.5cm).

There are also the largely self-explanatory absolute unitsinches (in), centimeters (cm), millimeters (mm), points (pt), and picas (pc). In general, you should only use absolute lengths when the size of the output is known (as with the printed pagesee Chapter 14).

Percentage values, 65%, for examplework much like ems, in that they are relative to some other value (Figure 7.13).

Figure 7.13. Percentages are generally relative to the parent element. So, in this example, the font would be set to 80% of the parent's font-size.

Bare Numbers

A very few CSS properties accept a value in the form of a number, without a unit, like 3. The most common are line-height (Figure 7.14) and z-index. (The others are mostly for print and aural style sheets and are not yet well supported.)

Figure 7.14. Don't confuse numbers and integers with length. A number or integer has no unit (like px). In this case, the value shown here is a factor that will be multiplied by the font-size to get the line-height.

URLs

Some CSS properties allow you to specify the URL of another file. In that case, use url(file.ext), where file.ext is the path and file name of the desired document (Figure 7.15). Note that the specifications state that relative URLs should be relative to the style sheet and not the (X)HTML document.

Figure 7.15. URLs in CSS properties do not need to be enclosed in quotation marks.

While you may use quotations around the file name, they're not required. On the other hand, there should be no space between the word url and the opening parentheses. White space between the parentheses and the address is allowed but not required.

For more information on writing the URLs themselves, consult URLs on page 35.

CSS Colors

There are several ways to specify colors for CSS properties. First, and easiest, the value can be one of 16 predefined color names (Figure 7.16). Of course, 16 colors get pretty boring pretty quickly.

Figure 7.16. Here are the 16 predefined color names together and their hexadecimal codes.

Instead of limiting yourself to those colors, you can construct your own by specifying the amount of red, green, and blue in the desired color. You can give the values of each of these contributing colors as a percentage, a number from 0255, or a hexadecimal representation of the number. For example, if you wanted to create a dark purple, you might use 35% red with 50% blue. That color could be written rgb(%35, 0%, 50%) as shown in Figure 7.17. If you use numerical values, you could write the same color as rgb(89, 0, 127), since 89 is 35% of 255 and 127 is 50% of 255.

Figure 7.17. Another way to express the amount of each of the three contributing colors is with a percentage. Define the red first, followed by green, and then blue.

I've saved the most common though most convoluted method for last (Figure 7.18): convert those numerical values to hexadecimals, join them together, and add an initial #: #59007F. (59 is the hexadecimal equivalent of 89, 00 is the hexadecimal equivalent of 0, and 7F is the hex equivalent of 127.)

Figure 7.18. The most common way in both (X)HTML and CSS to define a color is by specifying, with hexadecimal numbers, the amounts of red, green, and blue that it contains.

And if that weren't enough, when a hexadecimal color is comprised of three pairs of repeating digits, as in #ff3344, you may abbreviate the color to #f34.

While most current image editors, including Photoshop and Photoshop Elements, include tools for choosing colors and displaying their hex values, I've also included a do-it-yourself table in Appendix E, along with some esoteric details about hexadecimal conversions.

Perhaps more useful is the inside back cover of this book where you'll find a selection of colorstogether with their hex valuesthat you can use on your Web pages. I'd also recommending taking a look at Color on page 82.