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