Using Cascading Style Sheets (CSS)

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

Adornment Description Example
mm Milimeters margin-left:10mm;
cm Centimeters margin-left:10cm;
in Inches margin-left:4in;
pt Points (1 point = 1/72 Inch) margin-left:16pt;
pc Picas (1 pica = 12pt;) margin-left:2pc;

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.

Adornment Description Example
em Font height of an Element font-size:1.5em;
px Pixels margin-left:25px;


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.


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.


Adornment Description Example Sample
xx-small Extra, extra small font-size:xx-small; Sample
x-small Extra small font-size:x-small; Sample
small Small font-size:small; Sample
medium Medium font-size:medium; Sample
large Large font-size:large; Sample
x-large Extra large font-size:x-large; Sample
xx-large Extra, extra large font-size:xx-large; Sample

Relative Size for Fonts

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

Adornment Description Example
smaller font-size:smaller; Sample
larger font-size:larger; Sample

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.

    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.

Colour Hexadecimal RGB Code Example Sample
aqua #00ffff 0, 255, 255 color:aqua; color:#00ffff; color:#0ff; color:rgb(0,255,255); Sample
black #000000 0, 0, 0 color:black; color:#000000; color:#000; color:rgb(0,0,0); Sample
blue #0000ff 0, 0, 255 color:blue; color:#0000ff; color:#00f; color:rgb(0,0,255); Sample
fuchsia #ff00ff 255, 0, 255 color:fuchsia; color:#ff00ff; color:#f0f; color:rgb(0,255,255); Sample
gray #808080 128, 128, 128 color:gray; color:#808080; color:rgb(128,128,128); Sample
green #008000 0, 128, 0 color:green; color:#008000; color:rgb(0,128,0); Sample
lime #00ff00 0, 255, 0 color:lime; color:#00FF00; color:#0f0; color:rgb(0,255,0); Sample
maroon #800000 128, 0, 0 color:maroon; color:#800000; color:rgb(128,0,0); Sample
navy #000080 0, 0, 128 color:navy; color:#000080; color:rgb(0,0,128); Sample
olive #808000 128, 128, 0 color:olive; color:#808000; color:rgb(128,128,0); Sample
purple #800080 128, 0, 128 color:purple; color:#800080; color:rgb(128,0,128); Sample
red #ff0000 255, 0, 0 color:red; color:#ff0000; color:#f00; color:rgb(255,0,0); Sample
silver #cccccc 204, 204, 204 color:silver; color:#cccccc; color:#ccc; color:rgb(204,204,204); Sample
teal #008080 0, 128, 128 color:teal; color:#008080; color:rgb(0,128,128); Sample
white #ffffff 255, 255, 255 color:white; color:#ffffff; color:#fff; color:rgb(255,255,255); Sample
yellow #ffff00 255, 255, 0 color:yellow; color:#ffff0; color:#ff0; color:rgb(255,255,0); Sample

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( ).


You might also like...


About the author

Gez Lemon United Kingdom

I'm available for contract work. Please visit Juicify for details.

Interested in writing for us? Find out more.


Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“The difference between theory and practice is smaller in theory than in practice.”