Computer >> Computer tutorials >  >> Programming >> CSS

Setting Font Size with Em Using CSS


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 −

Setting Font Size with Em Using CSS

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 −

Setting Font Size with Em Using CSS