Home arrow Style Sheets arrow Page 2 - 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 Pixels
(Page 2 of 5 )

Web designers are accustomed to using the pixel unit to measure the font of text, as in the following example. Save the following CSS code into a file with the name Paragraph.css, and put it in the same directory as the HTML Web page.

p
{
  font-family: Arial, sans-serif;
  color: red;
  font-size: 15px;
}

Here is the HTML code:

<!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>
    <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>
  </body>
</html>

 

You will get the following results when you run the page.

Actually, we did nothing more than use the font size property to define the size of the font as 15 pixels. Note that you must place the abbreviation of the unit right after its value, as we did in the above example (15px). Let's talk a little more about pixels. A pixel is a colored small square in the display area of your screen. Its size is not absolute; it's relative to the screen resolution.

In other words, we can't know how many actual pixels are in one actual inch because pixels are relative to the screen resolution. If the screen resolution is 800 x 600, then a text that has been defined as 40px will be larger than the same text on a screen with 1024 x 768 resolution. This is because with the latter resolution, each row has 1024 dots (pixels) instead of 800, so the screen has to accommodate itself to the additional 224 pixels by dividing the display area by 1024 pixels (instead of 800). That means that the size of the pixel in the new resolution will be smaller than it was with an 800 x 600 screen resolution.

The best use of the pixel unit is for positioning and layout elements, but not fonts. Microsoft Internet Explorer 5 and 6 can't resize the text (through the View Menu --> Text Size Sub Menu) if it's using pixels, and this is a drawback. Although Mozilla can resize text that uses pixels, Microsoft Internet Explorer has more than 80 percent of the browser market; we can't just ignore that. So try to use pixels for positioning your elements, and avoid using it for styling fonts and printing documents.


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-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials