Style rule properties

Properties are used to give a style to the elements selected using the style rule selectors. We will describe the following groups of properties:

• the display property;
• font properties;
• text properties;
• box formatting properties;
• position properties.

Many properties represent lengths or colors. There are different units to specify length, both absolute such as inches, centimeters, millimeters, points, and picas, and relative, such as ems, exes, pixels, and percentages. Absolute units are appropriate for printed media, while relative ones are good for screen media, since they are relative with respect to the resolution of the monitor.

Color can be specified in different ways:

• by using a name. Valid names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow;
• by specifying the three components, that is red, green, and blue, of each color. Each component is given a number between 0 and 255, with 255 being the maximum amount of color, or a percentage. Numbers can be given in hexadecimal or decimal. Colors in which each component is equal form shades of gray, with white equal to the maximum amount and black equal to the minimum amount.

Here is an example:

dish      {color: red;} /* by name */
quantity  {color: #00FF00;} /* by components in hexadecimal */
component {color: rgb(0,0,255);} /* by components in decimal */
step      {color: rgb(20%,20%,20%);} /* by components with percentages */