Using Property Values

Property values come in the following forms: constant text, constant numbers, lengths, percentages, functions, comma-delimited lists of values, and space-delimited series of values. Each property accepts one or more of these types of values. I have included all common types of values in Example 1-6. But first, I have listed them here along with an explanation:
• color:black; assigns the constant value black to the color property. Most properties have unique constant values. For example, the color property can be assigned to over 170 constants that represent colors ranging from papayawhip to ThreeDDarkShadow.
• background-color:white; assigns the constant value white to the background-color property. Notice that the following three rules do the same thing as this rule, but use different types of property values.
• background-color:rgb(100%,100%,100%); assigns the CSS function rgb() to background-color. rgb() takes three comma-delimited parameters between its parentheses, which specify the amount of red, green, and blue to use for the color. In this example, percentages are used. 100% of each color makes white.
• background-color:rgb(255,255,255); assigns white to the background-color. In this case, values from 0 to 255 are used instead of percentages. The value 0 is no color. The value 255 equals 100% of the color. Using 255 for red, green, and blue makes white.
• background-color:WindowInfoBackground; assigns the operating system color WindowInfoBackground to background-color. Notice how operating system color constants are in CamelCase.7
• font-style:italic; assigns the constant value of italic to font-style. The font-style property also allows two other constant values: normal and oblique.
• font-size:20px; assigns a length of 20 pixels to font-size. You can assign a variety of measurements to most properties including px (pixel), em (height of the font or font-size), ex (height of the letter “x”), pt (point, i.e., 1/72 of an inch), in (inch), cm (centimeter), mm (millimeter), and pc (pica, i.e., 12 points, or 1/6 of an inch).
• font-family:“Century Gothic”, verdana, arial, sans-serif; assigns a commadelimited list of font names to font-family. If the first font name is unavailable, a browser uses the second, and so forth. The last font name should be one of the generic font names: serif, sans-serif, or monospace, which works in every browser. Whenever a font name contains a space, it must be enclosed in double quotes, such as “Century Gothic”.
• line-height:150%; assigns 150% of the font-size to line-height.
• margin:1em; assigns the size of the font to margin (i.e., font-size multiplied by 1).

• border:4px double black; creates a black, 4-pixel, double-line border. Notice how border takes three space-delimited values that represent the border’s width, style, and color. The sequence of the values does not matter. border is a shortcut property for three properties: border-width, border-style, and border-color. There are several other
shortcut properties including background, font, list-style, margin, and padding.
• padding:0.25em; assigns one-quarter of the font size to padding (i.e., font-size multiplied by 0.25).
• background-image:url(“gradient.jpg”); assigns the gradient.jpg image to background-image using the url function, which takes the URL of a file as its only parameter. I always put a URL in quotes, but you only have to if the URL contains whitespace.
• background-repeat:repeat-x; assigns the constant repeat-x to background-repeat. Other background-repeat values include repeat-y, repeat, and no-repeat.
• margin:0; assigns zero to margin. Zero is the only length that may be specified without a measurement. All other lengths must be immediately followed by a measurement, such as 1px, -1.5em, 2ex, 14pt, 0.5in, -3cm, 30mm, or 5pc.
• font-weight:900; assigns the constant 900 to font-weight. This number is actually a constant. You can use the following constants for font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, or 900. (Note that browser support is poor for numerical font weights, generally treating 100 through 400 as normal and 500
through 900 as bold. Furthermore, bolder and lighter is rarely supported by browsers and/or operating system fonts. Thus, I rarely use any value for font-weight other than normal or bold.)

Later in the post, I present a four-page chart called that lists all usable CSS properties and values. color is the only property in the chart that has an incomplete list of usable values. It shows 79 of the 170 color constants. I organized the 79 color constants into three groups that you may find useful: the 16 standard colors organized by hue, 35 common colors organized by hue from light to dark, and the 28 operating system colors. Throughout this book, I
often use the color gold. I also use related hues such as wheat, orange, tomato, firebrick, and
yellow.

Related posts:

1. Using Shorthand Properties in CSS Your body rule should now look like this: body {...
2. Using Cascade Order CSS allows you to assign the same rule to the...
3. CSS Syntax & Syntax Details CSS syntax is easy. A stylesheet contains styles; a style...
4. Web page backgrounds in CSS Backgrounds are added to web page elements using a number...

Related posts brought to you by Yet Another Related Posts Plugin.