
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
Setting Font Size with Em in CSS
To set the font-size property in CSS, you can use em. This is beneficial when you need pixel accuracy for the text. By default 1em = 16px, and 2em = 32px.
Example
<!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline; text-decoration-color: yellow; font-size: 1.3em; } </style> </head> <body> <h1>Examination Details</h1> <p class="demo">Exam on 20th December.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>
Output
Example
Let us now see another example −
<!DOCTYPE html> <html> <head> <style> div { text-align: justify; text-justify: inter-word; color: white; background-color: gray; font-size: 1.5em; } </style> </head> <body> <h2>Demo Heading</h2> <div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div> </body> </html>
Output
- Related Articles
- Setting Font Size with Em Using CSS
- Set Font Size with em using CSS
- Setting Font Size with Keywords in CSS
- Setting Font Size with Pixels in CSS
- Setting Font Size with Pixels using CSS
- Setting Font Size with Keywords Using CSS
- Set the font size with CSS
- Font Size in CSS
- Set Font Size with Pixels using CSS
- Font size adjust of an element with CSS
- Setting Tab Sizes in HTML with CSS tab-size Property
- CSS font-size-adjust Property
- Change the font size of a button with CSS
- Usage of font-size property in CSS
- Set Responsive Font Size using CSS

Advertisements