Learn CSS, part 2: Units of Measurement - Using Percentage
(Page 4 of 5 )
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 >>
More Style Sheets Articles
More By Michael Youssef
