Next »
148/920
« Previous

Compare larger and smaller keywords of the font-size to px based font size in HTML and CSS

Description

The following code shows how to compare larger and smaller keywords of the font-size to px based font size.

Example


<html>
<head>
<style rel='stylesheet' type='text/css'>
body {<!--from  w  w  w .  ja  va2 s . co  m-->
font-size: medium;
}
p#larger {
font-size: larger;
}
p#larger span {
font-size: 20px;
}
p#smaller {
font-size: smaller;
}
p#smaller span {
font-size: 12px;
}
span {
background: mistyrose;
}
</style>
</head>
<body>
<p id='larger'>
This font is 1.2 times the default font, or 20 pixels.<br />
<span>this is a test. </span>
</p>
<p id='smaller'>
This font is 1.2 smaller than the default size, or pixels.<br />
<span>this is a test. </span>
</p>
</body>
</html>

Click to view the demo

The code above generates the following result.

Compare larger and smaller keywords of the font-size to px based font size in HTML and CSS
Next »
« Previous