Section 16.7. Specifying Values


16.7. Specifying Values

It is important to use the proper syntax for specifying length and color values in style sheet rules.

16.7.1. Length Units

CSS allows measurements to be specified in a variety of units. Some of the units (such as em and pica) are taken from the traditional print publishing world. When specifying lengths, keep the following in mind:

  • Do not add space between the number and the two-letter unit abbreviation. It must be 24px, not 24 px.

  • The only value that does not require a unit abbreviation is 0 (zero).

  • Measurements may contain decimal fractions, such as 14.5cm.

  • Some properties, such as margins, accept negative values: margin: -500px

Table 16-1 lists units of measurements that you can specify in style sheet values.

Table 16-1. Units of measurements for style sheet values

Code

Unit

Description

px

Pixel

Pixel units are relative to the monitor resolution.

pt

Point

A traditional publishing unit of measurement for type. In CSS, a point is equal to 1/72 of an inch.

pc

Pica

A traditional publishing unit of measurement equal to 12 points (or 1/6 of an inch).

em

Em

A relative unit of measurement that traditionally equals the width of the capital letter "M" in the current font. In CSS, it is equal to the point size of the font (e.g., an em space in 24pt type is 24 points wide) and is used for both vertical and horizontal measurements.

ex

Ex

A relative unit of measurement that is the height of the lowercase letter "x" for that font (approximately half the length of an em).

in

Inches

Standard unit of measurement in the U.S.

mm

Millimeters

Metric measurement.

cm

Centimeters

Metric measurement.


16.7.2. Specifying Color

As in HTML, there are two methods for specifying color in style sheets: by name and by numerical value.

16.7.2.1. By name

You can specify color values by name as follows:

     h1 {color: olive;} 

The CSS 2.1 specification accepts only 17 color names for use in style sheets (CSS 1 and CSS 2 had only 16 names; orange was added in Version 2.1.) The color names are:

aqua

green

orange

white

black

lime

purple

yellow

blue

maroon

red

 

fuchsia

navy

silver

 

gray

olive

teal

 


Other names from the complete list of color names may be supported by some browsers. For the complete list, see Appendix D.

16.7.2.2. By RGB value

Within style sheets, RGB colors can be specified by any of the following methods:

     {color  : #0000FF;}     {color: #00F;}     {color: rgb(0,0,255);}     {color: rgb(0%, 0%, 100%);} 

The first method uses three two-digit hexadecimal RGB values (for a complete explanation, see Appendix D). The second method uses a three-digit syntax, which is essentially converted to the six-digit form by replicating each digit (therefore, #00F is the same as #0000FF).

The last two methods use a functional notation specifying RGB values as a comma-separated list of regular values (from 0 to 255) or percentage values (from 0 to 100%). Note that percentage values can use decimals, e.g., rgb(0%, 50.5%, 33.3%).

16.7.3. Percentage Values

Percentage values are indicated by a number followed by the percentage sign (%). Percentage values are calculated relative to other values in the document. When specifying percentage values for measurements, it is important to pay attention to how they will be calculated for the given property. Sometimes percentages are relative to the current element. In other instances, they are calculated based on the properties of the parent element. The CSS Recommendation specifies how percentage values are calculated for each value, and there are notes provided in the descriptions in this book as necessary.

16.7.4. Keyword Values

Most properties also have values that are described in keywords. You'll find keywords for each property in the property listing in the CSS Recommendation and throughout this book. Note that a keyword like normal may have different functions depending on the context of the property to which it is applied.

All properties in CSS 2.1 have the keyword inherit that forces the value of the property to be the same as that of the parent element. Most properties inherit by nature, but the inherit keyword is a tool for overriding assigned styles when necessary.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net