CSS Units of Measurement

The following contains the units of measurement that may be used with Cascading Style Sheets. The units for length may be positive, negative, decimal fraction or whole numbers.

Absolute Units for Length

Relative Units

When specifying font-sizes, it is preferable to specify them in relative units, so that the reader may adjust the size of the font through their user agent.

Percentages

Percentages are specified with an optional sign character (+ or -), followed by the value as a number, and a percent sign. The percentage value is relative to another value.

body
{
   font-size:140%;
}

Specifying a font-size of 100% in the body is recommended, as that will initialise the font to the users default size.

Specifying Font Sizes

The font size may be defined in points, pixels, inches, centimeters, or as a percentage of the size of the parent tag.

font-size:12pt;
font-size:12px;
font-size:0.2in;
font-size:0.5cm;
font-size:120%;

Relative Size for Fonts

There are two further settings that allow to increase or decrease the font-size from its current setting.

Specifying Font Names

Fonts may be a family-name, a generic-family, or both. A family-name is the name of a particular font. For example, arial is a family-name. A generic-family is the classification under which a family-name will occur. For example, serif is a generic-family. When more than one font-family is specified, the browser will use the first name that it recognises. It's good practice to end the list of fonts with a generic-family.

body
{
    font-family:arial, helvetica, courier, sans-serif;
}

Specifying Colours

Colours may be specified using a pre-defined colour name, or the red, green, and blue intensities of the colour. The red, green and blue intensities may be specified in hexadecimal, or decimal. A hexidecimal value is preceded by a hash (#) and consists of 3 values in the range 00 to ff that represesent the intensity of red, green and blue respectively. A three digit version may be used for replicating digits. For example #ffcc00, may be represented as #fc0. Decimal values are preceded by the rgb token, with the three decimal values in the range 0 to 255 representing the intensities of red, green and blue in brackets. Values are specified with 3 decimal numbers in the range 0 to 255 that represent the intensity of red, green and blue respectively.

Specifying a URL

A Uniform Resource Locator (URL), is used to provide the address of a resource on the Web. It is thought that a Uniform Resouce Name (URN) will be the new way of identifying resources in the future. A URL and a URN are collectively referred to as a Uniform Resource Identifier (URI). The notation to refer to a URI is url( ).

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