For scalable size of text, the font-size is expressed in em. Bye default one em is equal to 16px or 12pt. Its value is relative to the parent element’s font-size.
Syntax
The syntax of CSS font-size property is as follows −
Selector {
font-size: /*value*/
}Example
The following examples illustrate how CSS font-size property can be set in ems −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 40%;
border: 2px solid yellow;
padding: 20px;
font-size: 1em;
}
span {
font-size: 2em;
background-color: chartreuse;
}
</style>
</head>
<body>
<div>
<p>This is a demo paragraph<span> displaying font sizes</span> set with em in CSS.</p>
</div>
</body>
</html>Output
This gives the following output −
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 40%;
border: 2px ridge red;
font-size: 0.8em;
}
span {
font-size: 1.5em;
background-color: silver;
}
</style>
</head>
<body>
<h2>Class Info</h2>
<table>
<tr>
<th>Number of Students</th>
</tr>
<tr>
<td>Class A</td>
<td><span>50 Students</span></td>
</tr>
<tr>
<td>Class B</td>
<td><span>40 Students</span></td>
</tr>
</table>
</body>
</html>Output
This gives the following output −
