How Do I Set CSS Property Values?
The reference section lists the predefined keywords used by individual properties. However, colors, sizes, and URLs have their own syntax.
Specifying color values
Colors can be specified using hexadecimal notation, RGB (red, green, blue) values, or one of the 17 keywords listed in the following table:
| maroon #800000 | red #F00 | orange #FFA500 | yellow #FF0 | olive #808000 |
| purple #800080 | fuchsia #F0F | white #FFF | lime #0F0 | green #008000 |
| navy #000080 | blue #00F | aqua #0FF | teal #008080 | black #000 |
| silver #C0C0C0 | gray #808080 |
When using hexadecimal notation, remember the following:
- The color value must begin with a hash sign (
#). - You can use the full six-digit version or the three-digit shorthand (see Chapter 2 for an explanation of hexadecimal shorthand values).
- Do not mix up the letter O with 0 (zero) or lowercase L with 1. The only letters permitted in a hexadecimal value are A–F.
- The letters A–F in the hexadecimal value are case-insensitive. It doesn’t matter whether you use uppercase or lowercase.
To specify colors using RGB values, enter the red, green, and blue values as a comma-separated list between the parentheses of rgb(). The values can be numbers in the range of 0–255 or percentages from 0% to 100%.
For example, red can be specified in any of the following ways:
red#FF0000#f00rgb(255, 0, 0)rgb(100%, 0%, 0%)
Specifying sizes
The CSS2.1 specification uses the term “length” to describe a value that uses a unit of measurement. The only units that should be used for web pages displayed on a computer screen or mobile device are as follows:
em: This is equivalent to the height of the current font (with a16pxfont,1em=16px; with a24pxfont,1em=24px).ex: Most browsers treat this as half anem.px: Pixel.
Most sizes can also be specified as a percentage. This normally refers to a percentage of the size of the parent element or containing block.
There must be no space between the number and unit of measurement or percentage sign. For example, 1px and 10% are correct; 1 px and 10 % will not work.
When a zero value is used, the unit of measurement or percentage is optional: 0px and 0 are both equally valid.
Always use whole numbers with px. All other units of measurement can be used with decimal fractions. For values smaller than 1, the leading 0 of the decimal fraction is optional (0.5 and .5 are both OK).
When creating styles for printing, you should use the following absolute units:
in: Inch (2.54 centimeters)cm: Centimeter (0.394 in)mm: Millimeter (0.039 in)pt: Point (1/72 of an inch or 0.353 mm)pc: Pica (12 points or 4.233 mm)
Although some books and online tutorials use pt (points) for font sizes, this is considered bad practice. Absolute units, such as points, should be used only for print style sheets.
Specifying URLs
Properties such as background-image and list-style-image require the URL of the file you want to use. To specify the location of a file, enter its file path between the parentheses of url(). You can use either an absolute file path or a relative one. The file path can be optionally enclosed in single or double quotes. Whitespace between the parentheses and the file path is also permitted.
The following examples are all valid:
url(../../images/grand_canyon.jpg) url( /images/grand_canyon.jpg ) url('http://www.example.com/images/grand_canyon.jpg') url( '../../images/grand_canyon.jpg' ) url("/images/grand_canyon.jpg") url( "../../images/grand_canyon.jpg" )
If using a relative file path, the location should be relative to the style sheet.