Setting Font Size with Em Using CSS

CSSWeb DevelopmentFront End Technology

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 −

 Live Demo

<!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

 Live Demo

<!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 −

raja
Published on 08-Jan-2020 16:49:07
Advertisements