CSS Units of Measurement
By Stephen Bucaro
CSS provides a vaiety of measurement units including "absolute", "relative", and "percentages".
Absolute units, like "in" (inch) and "cm" (centimeter), should be used when you're
concerned about the appearance of the webapage when it's printed. Relative units like
"em" (representing the width of a capital M) and "px" (pixel) allow you to build webpages
that scale to the user's configured font size and display size. Percentages allow you
to scale elements relative to other elements on the webpage.
Absolute Units
cm Centimeter
mm Millimeter
in Inch
pt Point
pc Pica
The centimeter is a metric unit. There are approximately 2 1/2 centemeters in an inch.
There are exactly 10 millimeters in a centimeter. The inch is an English unit. The point
and pica are units left over from traditional printing where movable type was used. There
are 72 points in an inch, 6 pica in an inch.
Unless you are primarily concerned with the printing of the web page, you should avoid
using absolute units for webpages because they cannot be scaled to the users screen size.
What might appear as an inch on your computer screen will appear as two inches on the user's
screen if it is twice as large.
Relative Units
em The width of a capital M
ex The height of a small x
px Pixel
The em unit is useful for setting font sizes and margin sizes so they they maintain the
same relative appearance regardless of what default font size the user configures. Below is
an example of a headline and a paragraph defined with the em unit.
<h3 style"font-size: 2em;">The Constitution for the
United States of America</h3>
<p style="margin: 1em">We the people of the United
States, in order to form a more perfect union, establish
justice, insure domestic tranquility, provide for the
common defense, promote the general welfare, and secure
the blessings of liberty to ourselves and our posterity,
do ordain and establish this Constitution for the United
States of America.</p>
With the style properties defined above, the title font size will be two times
the default font size, and the paragraph margin will be the width of a capital M in
the default font size.
If you want to control the appearance of your webpage relative to images on the page,
you should use the px (pixel) unit. An image consists of a two-dimensional array of
colored dots on the computer screen. For that reason, the dimensions of images are always
in pixel units. If the size of your fonts and other elements on the webpage are not also
in pixel units, the relative size, and possibly location, of elements on the webpage will
vary depending upon the size and resolution of the users screen.
More CSS Quick Reference:
• Use Image for List Item Bullets
• Set the Background Properties
• Set the Letter Spacing
• Set an Element's Margin
• position:absolute
• Define CSS Rollover Effects
• Use an Embedded Style Sheet
• Indent the First Line of Text
• Set an Element's Clipping
• Set an Element's Float
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
