Measurements by George Hernandez

CSS units of measure.

Specifying Length

Here are the units of measurement. The syntax has no space between the value and the unit of measure.

Type	Unit	Name	Comment
Absolute	mm	Millimeter	10mm = 1cm. Floating-point value.
	cm	Centimeter	2.54cm = 1in. Floating-point value.
	in	Inch	1in = 25.4mm. Floating-point value.
	pc	Pica	6pc = 1in and 1pc = 12pt. Floating-point value.
	pt	Point	72pt = 1in. Floating-point value.
	xx-small, x-small, small, medium, large, x-large, xx-large can signify font-size
Relative	%	Percent	Relative to its normal size (100%). Integer value.
	em	Em	1em = point size of current font. Floating-point value.
	ex	Ex	1ex = height of lower case x of current font. Floating-point value.
	larger, smaller can signify font-size
Device Dependent	px	Pixel	1px = smallest unit on the display screen. Floating-point value.

Here are rules of thumb for selecting the type of unit of measurement used when specifying a value for a property in a CSS Rule:

Use relative (aka dynamic) measurements if you can since the item will then adjust to the different browser window sizes.
Use device dependent measurement (EG: pixels) if you can't. A pixel will be the smallest unit on the user's display screen and all your items on your pages are ultimately resolved to units.
Avoid absolute measurements if you can because different devices will interpret absolute measurements differently. EG: most screens interpret one inch as 72 pixels but some interpret it as 96 pixels or some other value.
If you specify just the number for a distance (EG: width=30;), it will assume that you meant px in Internet Explorer but it will not work in other browsers like Safari.

There are five different schemes for specifying values for colors:

By VGA name. I have listed the names in my section on Color. You might as well use the web compliant colors: black, white, red, green, blue, cyan, magenta, and yellow. EG: { color: red; }. Note that strings like 'red' or "red" cannot be used in place of color keywords.
By 12 bit hexadecimal. Use three hexadecimal digits, standing for red, green, and blue respectively. You might as well use the web compliant colors: 0, 3, 6, 9, C, and F. EG: { color: #F00; }.
By 24 bit hexadecimal. Use six hexadecimal digits, where a pair stands for red, green, and blue. You might as well use the web compliant colors: 00, 33, 66, 99, CC, and FF. EG: { color: #FF0000; }.
By 24 bit decimal. Use values between 0 and 255 for red, green, and blue. You might as well use the web compliant colors: 0, 51, 102, 153, 204, and 255. EG: { color: rgb(255,0,0); }.
By percentage. Use values between 0 and 100 for red, green, and blue. You might as well use the web compliant colors: 0, 20, 40, 60, 80, and 100%. EG: { color: rgb(100%,0%,0%); }.
By float range. Use values between 0.0 and 1.0 for red, green, and blue. You might as well use the web compliant colors: 0, 0.2, 0.4, 0.6, 0.8, and 1.0. EG: { color: rgb(1,0,0); }.

Some properties require different values.

Angles are +/- real numbers and an angle unit identifier of either deg, grad, or rad. EGs:
- -10deg and 350deg are equivalent.
- 90deg or 100grad or 1.570796326794897rad are also equivalent.
Frequency values are positive real numbers and a time unit of either Hz or KHz.
Integer values, i.e. ..., -2, -1, 0, 1, 2, 3, ....
Percentage values are integers concatenated with a percentage sign. EG: 5%.
Real number values, i.e. an integer that may also have a fraction expressed with decimal notation. EG: 1.25.
Time values are positive real numbers and a time unit of either ms or s.
URLS have a method format. EG: BODY { background: url("http://www.fake.com/gray.gif") }.

Page Modified: (Hand noted: 2004-02-20 22:40:16Z) (Auto noted: 2007-11-17 06:48:25Z)