Absolute and Relative Units in HTML
By Nilarjun DasIn this post, we will be learning absolute and relative units in HTML with examples.
Cascading Sheet Styles(CSS) in HTML has number of different units in which length can be measured. CSS properties like height, margin, font-size, border, etc. require length values.
CSS has two types of units for measuring lengths/dimensions:
- Absolute Units
Absolute units tie to the physical units of length, that is they approximate the actual measurement on a screen, keeping in mind the changes observed due to the difference in screen resolutions. They are fixed values and will appear exactly as the dimensions mentioned. Absolute units should not be used for a responsive website layout where the screen size varies.
absolute units in HTML
Code Example:
<!DOCTYPE html>
<head>
<style>
/*inches*/
h1 { font-size: 0.5in; }
/*centimeters*/
h2 { line-height: 3cm; }
/*millimeters*/
h3 { word-spacing: 4mm; }
/*points*/
h4 { font-size: 12pt; }
/*picas*/
h5 { font-size: 1pc; }
/*pixel*/
h6 { font-size: 12px; }
</style>
</head>
<body>
<h1>This is h1 example</h1>
<h2>This is h2 example</h2>
<h3>This is h3 example</h3>
<h4>This is h4 example</h4>
<h5>This is h5 example</h5>
<h6>This is h6 example</h6>
</body>
</html>- Relative Units
Relative units are tied to the other length values, that is, they depend on other specified lengths. It scales better in mediums of different resolutions.
Code Example:<!DOCTYPE html> <head> <style> /*Using % Notation*/ body { font-size: 62.5%; } /*Using <em>em</em> notation*/ p { font-size: 1.6em; } </style> </head> <body> <element>This is an element</element> <p>This is a paragraph</p> </body> </html>
We hope you got a clear idea of absolute and relative units in HTML.
Also read,
Leave a Reply