Home arrow Style Sheets arrow Learn CSS, part 2: Units of Measurement

Learn CSS, part 2: Units of Measurement

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.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 31
May 23, 2005
  1. · Learn CSS, part 2: Units of Measurement
  2. · Using Pixels
  3. · Using em and ex
  4. · Using Percentage
  5. · Using Absolute Measurement Units

print this article

Learn CSS, part 2: Units of Measurement
(Page 1 of 5 )

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.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials