Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

CSS Units of Measurement

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:
• Set the Border Style
• Set the Text Color
• Specifying Color
• Set the Word Spacing
• Use an Embedded Style Sheet
• Set the Font Properties
• Vertical Align an Element
• Set the Font Slant
• Set the Text Decoration
• Set the Border Width

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268