Learn CSS, part 2: Units of Measurement

(Page 1 of 5 )

In this second article in a multi-part series covering Cascading Style Sheets (CSS), we will discuss units of measurement for establishing the size of certain elements in your Web page. You will learn the difference between absolute and relative units of measurement, and which ones are better to use for particular purposes.

You have been introduced to CSS in the first article. Now we will discuss the basic concepts that you should understand in order to maximize your CSS use in your projects. In this article we discuss the CSS units of measurements and learn when to use them. I'm sure that after a few articles you will appreciate CSS, because there are many effects that you can create with CSS which you can't create with HTML.

CSS supports the the following units to measure your markup elements:

• Centimeters: abbreviated as (cm)
  
• Inches: abbreviated as (in)
  
• Millimeters: abbreviated as (mm)
  
• Points: abbreviated as (pt), equal to 1/72 of one inch
  
• Picas: abbreviated as (pc), equal to 1/6 of one inch
  
• Pixels: abbreviated as (px)
  
• x-Height: abbreviated as (ex)
  
• (em)
  
• Percentage

As you can see, there are some commonly used units that you are no doubt familiar with, such as inches, centimeters and pixels, and some that you may not have seen before, such as ex and em. There are two types of measurement units in CSS, relative measurement units and absolute measurement units (which are colored in red in the above list). Absolute units are those units that maintain their length across browsers and screen solutions, because it's assumed (I will discuss why I'm saying it's "assumed" shortly) that one centimeter is one centimeter in all browsers, regardless of screen resolution. Relative units, on the other hand, as the name applies, depend on some other value, such as screen resolution. The question is, do you need to use relative units or absolute units in your websites? Let's examine the issue.

Next: Using Pixels >>
 

More Style Sheets Articles
More By Michael Youssef

Comments On: Learn CSS, part 2: Units of Measurement

· It would have been worth noting in this article that absolute measurements in...   >>> Post your comment now!