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.
Next: Using Percentage >>
More Style Sheets Articles
More By Michael Youssef
/ 20 
