Home arrow Style Sheets arrow Page 3 - 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 em and ex
(Page 3 of 5 )

Let's talk about em. A property with a value of 1 em means that it has the same size as the nearest font size property in the Style Sheet. If there are no font size properties defined in the style sheet, it has the same size as the default font size. It's better to explain this with an example.

body
{
  font-size: 10px;
  font-family: Arial, sans-serif;
  color: red;
}

h1
{
  font-size: 2em;
  background-color: aqua;
}

p
{
  font-size: 1.2em;
}

.Heading
{
  font-size: 20px;
  border-bottom : .05em solid black;
}

 

The above is the Style Sheet; 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>
    <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 class="Heading">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>

 

Open this page to get the following result:

Let's take the CSS code step-by-step.

body
{
  font-size: 10px;
  font-family: Arial, sans-serif;
  color: red;
}

The first rule defines some properties for the body selector (which means the body element), setting the font size to 10 Pixels, font family to Arial and font color to red.

h1
{
  font-size: 2em;
  background-color: aqua;
}

The h1 rule defines the font size as 2 em, which means that the h1 element will be twice as large as the nearest font size. The nearest font size in the style sheet is 10 pixels. So 2 em means 10 multiplied by 2 = 20 pixels. Actually, if we didn't have a font size property in the style sheet, 1 em means the same size as the default font size of the browser, 2 em means twice the default font size of the browser, and so on.

p
{
  font-size: 1.2em;
}

This rule defines the font size of the paragraph as 1.2em, which means 12 pixels, because the nearest font size property in the body rule is 10 pixels, so 10 multiplied by 1.2 = 12 Pixels.

.Heading
{
  font-size: 20px;
  border-bottom : .05em solid black;
}

The second <h1> element in the HTML file uses a class named Heading, which sets the font size to 20 Pixels, and the border-bottom property (which defines the style of the bottom border of the element that will use this class) to .05em, with the style as solid and in black. We will talk more about borders and their properties later in the series, but now we need to understand how many pixels .05em means. The nearest font size property is in the same rule, and has a value of 20px, so .05 means one pixel only. 

Your website users can resize fonts, so, for example, here's what will happen when I change the text size to 150 percent using Mozilla. Note that the bottom border of the <h1> element has been resized, too, because it uses the em relative measurement unit. Try to use em only with fonts, and use pixels to style other elements.

There is another relative measurement unit that is not yet fully supported by web browsers. It's the ex or x-height unit. It's said to be equal to the height of the lowercase letter "x" in the default font size. Because it's difficult to calculate the height of the lowercase letter "x" of a certain font, browsers make assumptions about the height. Because of this, and the unit's relative lack of browser support, we avoid using it.


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