# Measurements

CSS units of measure

TAGS: CSS, Cyber Tech, Measurements, Standards, TECH

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

## Specifying Color

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); }.

## Specifying Other Values

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") }.

GeorgeHernandez.comSome rights reserved