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

Poor Best

Rating:

/ 21

May 23, 2005

TABLE OF CONTENTS:

· Learn CSS, part 2: Units of Measurement
· Using Pixels
· Using em and ex
· Using Percentage
· Using Absolute Measurement Units

With CSS you can use a percentage value for the font size property (as well as other properties, but here we are focusing on fonts). The percentage value is relative to the user's default font, so when you define a font size with the value 50 percent, and the default font size was 16px (like the Mozilla browser's default font size), you get an 8px font size. Let's see an example:

body
{
font-family: Arial, sans-serif;
color: red;
}
h1
{
font-size: 150%;
background-color: aqua;
}
p
{
font-size: 80%;
}

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

When you open the Web page, you will get the following:

We have defined a font size value of 150 percent for the h1 selector, which means 1.5 times the default font size, and we have set the value 80 percent to the font size property of the selector p, so we have 0.8 of the default font size. Note that the user can change the default font size, and the text will resize to accommodate the new size.

Next: Using Absolute Measurement Units >>