CSS Units
The CSS units are used to express the length/size of the value of the CSS property that we are specifying for a particular element. There are several CSS properties that accept the value as a length such as height, width, margin, padding, etc.
The CSS units are used to express the nature of the length and we can not provide the whitespace between the length and its unit. There are also some CSS properties that also accept negative values.
Note : a length is a number that can be the value of any CSS property followed by the units.
Example: Specifying a value of CSS properties in length along with the CSS units
<!DOCTYPE html>
<html>
<head>
<title>CSS Units</title>
<style>
h1 {
font-size: 50px;
}
p {
font-size: 30px;
line-height: 40px;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Hello! This is a aragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Output:
Length Units in CSS
There are basically two types of length units, which are given below:
- Absolute Lengths
- Relative Lengths
Absolute Lengths in CSS
The absolute lengths are the fixed-length units and the lengths that are expressed using these lengths will display as exactly that size. It is recommended that not to use these lengths on the screen because the screen size varies a lot. These lengths are mostly used when the output medium is known such as print layout.
| S No. |
Units |
Description |
| 1. |
cm (Centimeters) |
It expresses the length in centimeters. |
| 2. |
mm (millimeters) |
It expresses the length in millimeters |
| 3. |
in (inches) |
It expresses the length in inches. (1inch = 96px = 2.54cm) |
| 4. |
px (pixels) |
It expresses the length in pixels. (1 px = 1/96th of 1 in) |
| 5. |
pt (points) |
It expresses the length in points. (1pt = 1/72th of 1in) |
| 6. |
pc (picas) |
It expresses the length in picas. (1pc = 12pt) |
Example: Applying CSS Absolute Length on HTML elements
In the given example, we have created paragraphs using <p> element and specify the CSS property font-size for each paragraph with value length (in numbers). Each length value consists of a different unit.
<!DOCTYPE html>
<html>
<head>
<title>CSS Units</title>
<style>
body{
text-align: center;
}
p{
line-height: 0.1cm;
}
</style>
</head>
<body>
<h1> Absolute units </h1>
<p style="font-size: 1cm;">It has cm unit.</p>
<p style="font-size: 5mm;">It has mm unit</p>
<p style="font-size: .5in;">It has in unit.</p>
<p style="font-size: 50px;">It has px unit.</p>
<p style="font-size: 50pt;">It has pt unit.</p>
<p style="font-size: 5pc;">It has pc unit.</p>
</body>
</html>
Output:
Relative Lengths in CSS
The relative lengths are used for the responsive site because these length units specify the length that is relative to another length property. These lengths are best when the screen size varies a lot because it scales better between the different rendering mediums. These units can be used as a default for the responsive units.
| S No. |
Units |
Description |
| 1. |
em |
This unit is used to specify the measurement relative to the font size of the element. |
| 2. |
ex |
This unit is used to specify the measurement relative to the x-height of the current font. |
| 3. |
ch |
This unit is used to specify the measurement relative to the width of the "0". |
| 4. |
rem |
This unit is used to specify the measurement relative to the font size of the root element. |
| 5. |
vw |
This unit is used to specify the measurement relative to the 1% width of the viewport. |
| 6. |
vh |
This unit is used to specify the measurement relative to the 1% height of the viewport. |
| 7. |
vmin |
This unit is used to specify the measurement relative to 1% of the smaller dimension of the viewport. |
| 8. |
vmax |
This unit is used to specify the measurement relative to 1% of the largest dimension of the viewport. |
| 9. |
% |
This unit is used to specify the measurement relative to the parent element. |
Example: Applying CSS relative length on HTML elements
In this example, we have created multiple paragraphs using <p> element and set a different relative unit to each paragraph.
Conclusion
In this lesson, we have learned different types of length units used in CSS. There are basically two types of length, which are given below:
Absolute Lengths - These are fixed-length units.
Relative Lengths - These lengths used on responsive websites.
