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 measurement unit of some sort (here known as a 'length' value), while the 'color' property (for example) will need a very different type of unit. For this reason the units described here are divided into 'length' values and 'non-length' values.

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 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

Enter the name of 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'.