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 −