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.
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.
- A unit that is related to the font size
- Another unit that is related to the font size
- 1 vw = 1% of the viewport width
- 1 vh = 1% of the viewport height
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.
- 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.
- 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'.
- Left or right
- Solid, dotted, dashed and others
- Similar to the 'background' property above. It offers a way to specify a range of border-related values in a single declaration.
- Left, right, center, justify
- This can be 'normal' or 'bold', or a 'hundred' value from 100 to 900, the higher the bolder. 400 = 'normal'.
- 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;
- Inline, block, none
- Visible (default), hidden
None and normal
Often a 'none' or 'normal' will serve as a value:
- The 'none' value can be used for many properties; no need to think of a unit; just write 'none'.
- The 'normal' value can be used for several font-related properties. Examples include 'font-style' and 'font-variant'.