Using the combination of Percentage and Em in CSS

CSS Web Development Front End Technology

We can use a combination of percentage and em to specify the font-size of elements for better compatibility of font. This allows us to have uniform text across different browsers.

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 with keywords −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-size: 80%;
}
p {
   font-size: 2em;
}
span {
   font-size: 4em;
   font-style: italic;
}
</style>
</head>
<body>
<p>Reading <span>source code</span> written by others gives you opportunity to criticize the 
mistakes done in writing that code</p>
</body>
</html>

Output

This gives the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   font-size: 120%;
}
p {
   font-size: 2em;
}
</style>
</head>
<body>
<h3>Demo Heading</h3>
This is example text.
<div>
Examples are easier to understand with practical implementation
<p>This is another text just to display different ways to set font size in CSS.</p>
</div>
</body>
</html>

Output

This gives the following output −

AmitDiwan

Published on 08-Jan-2020 12:23:36

Previous Page Print Page