Next / Previous / Contents / TCC Help System / NM Tech homepage

6. Common value types in CSS

Before reviewing the many properties in CSS, we need to survey some of the common types of values used by properties.

6.1. Dimensions

Wherever a property can be set to a value representing a physical dimension, such as a height or a width, there are several ways to specify them.

These units are used in property definitions:

UnitDescription
mmMillimeters
cmCentimeters
inInches
ptPrinter's points, about 1/72"
pcPrinter's pica, about 1/6"
emAn em is the current font size. For example, if the font size is 14pt, two ems is 28pt.
pxOne pixel on the display.

You can also specify dimensions as a percentage. For example, specifying the left margin as 10% would mean the left margin would be a tenth of the total screen width.

Note

Whenever possible, prefer relative units (ems and percentages) over fixed units. Consider the plight of readers whose eyes are aging and not as sharp as they were as a youngster. They can read your page if they increase the font size. Percentage units can help your layout adjust to different screen sizes.

6.2. Specifying colors

There are several ways of describing colors in Cascading Style sheets.

  • There are sixteen predefined color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, and white.

  • You can specify colors as percentages in the RGB (red-green-blue) color system. For example, this rule would display all h1 headings in cyan:

      h1 { color: rgb(0%, 100%, 100%); }
    

    where the first number is red, the second green, and the third blue.

  • The rgb() notation also allows numbers in the range 0–255. For example, rgb(255, 255, 0) is pure yellow (pure red plus pure green).

  • You can also define the colors using a string of the form #rgb or #rrggbb, using hexadecimal digits to specify the relative amount of red, green and blue. For example, color #ff5500 has full red, a little green, and no blue.

    Any color in the #rgb form is the same as if each of the three digits were doubled. For example, #f50 is the same as #ff5500.

6.3. String constants

Most property values in CSS are keywords. However, sometimes it is necessary to specify a string constant. You can use either double-quotes "…" or single-quotes '…' to enclose string constants.

For example, to import a stylesheet named "basic.css" into your stylesheet, you would use this at-rule:

@import "basic.css";

To include a quote symbol inside a string, precede it with a backslash, e.g., 'don\'t' is the same string as "don't".

You can include any character value inside a string by encoding it as “\hh”, where hh is the character's code value in hexadecimal. For example, since the single-quote character has code hex 27, string "don't" could also be represented as 'don\27t'.

6.4. Universal resource identifiers (URIs)

A URI describes some resource on the World Wide Web. The best way to identify such a resource is to use the url function, which has this format:

url("URI")

where URI is the resource's URI.

For example, suppose you have a background image named lawn.jpg in the same directory as all your pages. This rule would place it as the page background:

  body { background-image: url("lawn.jpg"); }

You can, of course, use a full URI to refer to any image on the Web.

6.5. Counters

If you need to assign serial numbers to some sequence of elements, such as bullets in a bullet list, sections in a chapter, or similar applications, CSS allows you to declare counters that hold such numbers.

Counters are created by using the counter-reset property. For details on the creation and application of counters, see Section 16, “The content property: Specifying content in pseudo-elements”.

6.6. Specifying angles

To describe an angle, use a signed number immediately followed by one of the three angle specifiers:

  • deg for degrees.

  • grad for grads.

  • rad for radians.

For example, audio playback defines an azimuth property that specifies the apparent source of a sound in the stereo image. Azimuth zero is straight ahead; 90° is purely in the right ear; -90° is in the left ear; and so on. So, to specify that the azimuth of a spoken h1 heading is halfway between straight ahead and the left ear, you would use this rule:

  h1 { azimuth: -45deg; }

6.7. Times

CSS time intervals are specified as a number followed immediately by either ms for milliseconds or s for seconds.

For example, if you want the speech synthesizer to insert a fifty-millisecond delay before speaking an h3 heading, use this rule:

  h3 { pause-before: 50ms; }

6.8. Frequencies

Frequencies in CSS are specified as a number followed immediately by suffix Hz for Hertz, or kHz for kiloHertz. (Note that CSS is case-insensitive, so you don't have to capitalize them as carefully as they are shown here.)

For example, to specify that a speech synthesizer should produce a voice with a frequency around 180 Hertz for title elements, you would use this rule:

  title { pitch: 180Hz; }