
- 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
Understanding CSS Absolute and Relative Units
CSS Absolute Units
The absolute length units are fixed in relation to each other. These units are used when the output format is already known. Following are some of the Absolute Length Units −
Sr.No | Unit & Description |
---|---|
1 | cm centimeters |
2 | mm millimeters |
3 | in inches (1in = 96px = 2.54cm) |
4 | px * pixels (1px = 1/96th of 1in) |
5 | pt points (1pt = 1/72 of 1in) |
6 | pc picas (1pc = 12 pt) |
Example
Let us now see an example −
<!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline underline; text-decoration-color: blue; font-size: 0.3in; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>
Output
CSS Relative Units
Relative length units in CSS is used to specify a length relative to another length property.
Relative to the x-height of the current font
Sr.no | Unit & Description |
---|---|
1 | em Relative to the font-size of the element i.e 4em means 4 times the size of the current font. |
2 | ex Relative to the x-height of the current font |
3 | ch Relative to width of the 0 |
4 | rem Relative to font-size of the root element |
5 | vw Relative to 1% of the width of the viewport* |
6 | vh Relative to 1% of the height of the viewport* |
7 | vmin Relative to 1% of viewport's* smaller dimension |
8 | vmax Relative to 1% of viewport's* larger dimension |
9 | % Relative to the parent element |
Example
Let us see an example using Relative Length Units −
<!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline underline; text-decoration-color: blue; font-size: 1.4em; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>
Output
- Related Articles
- CSS Absolute and Relative Units
- CSS Relative units
- CSS Absolute Units
- Understanding CSS Units
- Relative Length Units in CSS
- Absolute Length Units in CSS
- Absolute and Relative Imports in Python
- Absolute and Relative frequency in Pandas
- Absolute and Relative Magnetic Permeability (µ)
- Difference between an Absolute URL and a Relative URL
- Understanding CSS Selector and Declarations
- CSS position: relative;
- What is the difference between relative and absolute XPath in Selenium?
- CSS position: absolute;
- Understanding CSS Media Types and Queries

Advertisements