Understanding CSS Units

One important part of learning CSS is to understand the units used in it. Only when you have some grasp of the units used in it would you be able to create the pages as you really want them to look. We will be discussing here some of the more basic questions when it comes to CSS units.

CSS Units

Here are some basic information that you should have when it comes to CSS units:

Length Values

The values of length are normally made with the use of plus or minus signs before the abbreviation of the unit used. Keep in mind that putting in spaces between the characters of the unit is not valid. 1.2em is valid while 1.2 em is not. When the value is 0 there is no need to write the abbreviations. There are two types of unit that can be used. The first one is the relative and the second one is the absolute.

Relative units are usually preferred because they would be able to adjust a lot better. Here are some examples of relative units:

em- This is the height of the font of the element.- p {letter-spacing: 7em;}

ex- This refers to the height of the letter x. To be more specific, that would be the lower case letter x

the font used in the element. – p {font-size: 24pt; line-height: 3ex;}

px- This refers to pixels.- p {padding: 25px;}

Absolute units on the other hand are less dependent on the kind of output medium that is used. These units are fixed. Here are some examples:

in- This means inches. p {word-spacing: .15in;}

cm- Gives out a measurement in centimeters. div {margin-bottom: 2cm;}

mm- This is a measurement in millimeters p {word-spacing: 25mm;}

pt- This refers to a point. One point is equivalent to 1/72 inches. body {font-size: 18pt;}

pc- This refers to a pica. One pica is equivalent to 12 points. p {font-size: 20pc;}

Color Units

Color can be specified with the use of RGB colors. There are four ways of stating it.

#rrggbb (e.g., #00cc00)

#rgb (e.g., #0c0)



Those four codes actually refer to the same color. It all means the same.

Denoting URL

URLs can also be defined in CSS. It is usually denoted by the actual URL followed by the keyword. The URL can also be quoted or a white space could be placed right before, but those are optional ways.

Percentage Units

In CSS the percentage units are denoted by the plus or the minus sign, which is then followed by the number and then the percent sign. There should be no spaces in between the values. Keep in mind that percentage values are going to be relative to other values. Usually it depends on the font size of the element. Here is a sample code for a percentage unit:

p {font-size: 16pt; line-height: 121%;}

These are just some of the basic things that you need to learn about CSS units and how you define them.