Next »
150/920
« Previous

Compare seven different absolute size keywords, which set the font size relative to the user's font size preference in HTML and CSS

Description

The following code shows how to compare seven different absolute size keywords, which set the font size relative to the user's font size preference.

Example


<html>
<head>
<style type='text/css'>
body {<!--  ww  w.  ja va 2  s. co m-->
font: 16px sans-serif;
}
span {
background: mistyrose;
}
</style>
</head>
<body>
<p>
The font-size property supports a variety of methods for
specifying a font size.  For example, there
are seven different absolute size keywords, which set the
font size relative to the user's font size preference.
</p>
<ul>
<li style='font-size: xx-small;'>xx-small</li>
<li style='font-size: x-small;'>x-small</li>
<li style='font-size: small;'>small</li>
<li style='font-size: medium;'>medium</li>
<li style='font-size: large;'>large</li>
<li style='font-size: x-large;'>x-large</li>
<li style='font-size: xx-large;'>xx-large</li>
</ul>
<p>
You can also make fonts
<span style='font-size: larger;'>larger</span> or
<span style='font-size: smaller;'>smaller</span> by way
of the <span style='font-size: larger;'>larger</span> or
<span style='font-size: smaller;'>smaller</span> keywords.
</p>
<p>
You can make fonts
<span style='font-size: 150%;'>50% larger</span>
or <span style='font-size: 75%;'>25% smaller</span> by way
of percentages.
</p>
<p>
You can even make a font
<span style='font-size: 1.5em;'>50% larger</span>
or <span style='font-size: 0.75em;'>25% smaller</span> by way
of em units.
</p>
</body>
</html>

Click to view the demo

The code above generates the following result.

Compare seven different absolute size keywords, which set the font size relative to the user
Next »
« Previous