Use quote marks to find an "exact phrase"

Print version

print icon

4: Units and values

Values

This page will prepare you for the units and values you will see and use in this course. It is not a comprehensive list of all the units used in web design, but it does cover the most common types.

Different units will apply to different types of property; a font size will need a 'length' measurement of some sort, while the 'color' property will need a very different type of unit. For this reason the units described here are divided into 'length' units and 'non-length' units.

Don’t be too concerned about understanding everything here when you first read it. You will be referring to this chapter as you progress through the course and it will make more sense as you learn more.

CSS values reference

There's no escaping it; sooner or later you'll need to refer to more comprehensive sources as you look for different properties and their values. The 'CSS Values' website is a great resource for all things to do with CSS values. And, as with most things web design, W3Schools is also a great reference.

Length values

'Think responsive'

You want your work to look good on any device, big or small. To this end you should use units that scale to suit the size of the browser window, or 'viewport'. The 'responsive' in the heading above refers to responsive web design, which ensures a good user experience, whatever the device.

Length values: Responsive = relative units

Use 'relative' units for responsive web design. You may sometimes be unsure of which unit to use – don't be afraid to experiment.

%
A percentage. Of something. In the case of a font, it will be a percentage of the browser font size. For the width of an element it will be a percentage of the width of its container.
em
A unit that is related to the font size
rem
Another unit that is related to the font size
vw
1 vw = 1% of the viewport width
vh
1 vh = 1% of the viewport height

Negative values

In many instances negative values are allowed. They can be very useful, so keep it in mind.

Length values – absolute units

The evil twin of the 'relative' units, the one you shouldn't use, is 'absolute' units, such as cm, pts or inches. An exception is px (pixels), which is useful for very small lengths, such as the width of borders.

Non-length properties and values

color
This means font colour. When specifying a colour you can use standard colour names, 'hex' colour codes or RGB.
-color (e.g. background-color)
The colour of other page features e.g. 'background-color' or 'border-color'. Colour specified in any of the same ways as font colour.
Background
The property 'background' gathers several properties relating to background colour and images. It offers a way to specify all the values for those properties in a single declaration. If you wish to specify just the background colour, then use 'background-color'.
float
Left or right
border-style
Solid, dotted, dashed and others
border
Similar to the 'background' property above. It offers a way to specify a range of border-related values in a single declaration.
text-align
Left, right, center, justify
font-weight
This can be 'normal' or 'bold', or a 'hundred' value from 100 to 900, the higher the bolder. 400 = 'normal'.
font-family
Name your desired font followed by a few alternatives in case the browser cannot display it. One of the fonts should be generic. List them in order of preference, comma separated. E.g. arial, calibri, sans-serif;
display
Inline, block, none
visibility
Visible (default), hidden

None and normal

Often a 'none' or 'normal' will serve as a value:

none
The 'none' value can be used for many properties; no need to think of a unit; just write 'none'.
normal
The 'normal' value can be used for several font-related properties. Examples include 'font-style' and 'font-variant'.