Home arrow Style Sheets arrow Page 5 - Learn CSS, part 2: Units of Measurement
STYLE SHEETS

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Learn CSS, part 2: Units of Measurement - Using Absolute Measurement Units
(Page 5 of 5 )

What we have been discussing until now are the relative measurement units. It's time to discuss the absolute measurement units which are assumed to be realistic in terms of actual size (I will talk about that shortly). The supported absolute measurement units are cm, mm, in, pt and pc. Let's see an example, then talk more about these units.

body
{
  font-family: Tahoma;
  color: blue;
}

h1
{
  font-size: 15pt;
  background-color: aqua;
}

p
{
  font-size: 1pc;
}

And the HTML code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="stylesheet" href="paragraph.css" type="text/css">
  <title>Measurement Units with CSS</title>
  </head>
  <body>
    <h1>What's CSS?</h1>
    <p>
      CSS is a powerful formatting language for the web that is being used
with markup languages like HTML, XHTML and XML and that's because the
natural of the language. CSS uses the markup element name for applying
formatting styles.
    </p>
    <h1>CSS and Markup Languages</h1>
    <p>
You can't use css as a stand-alone styling language because you
need something to style, like HTML or XHTML page.
    </p>
  </body>
</html>
 

Here's the result:

In this example I have used points (1 point is equal to 1/72 of an inch) and picas (1 pica is equal to 1/6 of inch, which in this case means 12 pixels) to set the font size for the h1 and p selectors respectively. So do you think that the <h1> elements in the above web page are really 15 points in size? How do computers measure inches? The computer would need to do so, to calculate the pt and pc units. The truth is, computers can't easily measure or calculate real inches like the ones you see on a ruler. This means that the absolute measurement units are inconsistent.

You will be surprised to learn that computers measure inches based on pixels (and after calculating the inch, you can calculate the other absolute units). Windows defines one inch as equal to 96 Pixels. Because the size of each pixel is difficult to know (because you have the option to change your screen resolution, which changes the size of the pixel) one inch isn't really 96 pixels. Other operating systems, such as Apple's Mac OS X, define one inch as 72 pixels.

So the size of an "inch" in a browser window is far from the inch of the ruler, because the size of the pixel is determined by the screen resolution. If the resolution is 800 x 600 and you set the value of some selector's width property to eight inches, it will cover almost all of the client's area -- but if you change the screen resolution to 1024 x 768, you will find that the element's width (the selector width) covers less area. Because of the consistency problems associated with absolute measurement units, we don't use them to design Web pages. 

So we will be using pixels for sizing images, borders, margins and other positioning and layout tasks; we will be using em and percentage for font size because this allows the user to resize the text; and we will avoid using absolute measurement units for Web pages.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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