There are various units in CSS to express the measurement and length. A CSS unit is used to determine the property size, which we set for an element or its content. The units in CSS are required to define the measurement such as margin: 20px; in which the px (or pixel) is the CSS unit. They are used to set margin, padding, lengths, and so on.
We must avoid inserting any spaces between the number and the unit. Omitting the unit is acceptable when the value is 0. Certain CSS properties support negative length values.
The measurement unit in CSS comes in two varieties:
- Fixed length.
- Dynamic length.
Absolute lengths
These represent specific measurements that will display at a precise size when indicated in absolute units. It is advisable to avoid using them for on-screen display due to the wide range of screen sizes. Absolute units are more suitable for scenarios where the output medium is predetermined, such as in print design.
Absolute measurements are beneficial in scenarios where responsiveness is not a priority within a project. However, they are less ideal for responsive websites as they do not adjust proportionally when the screen size is altered.
Typically, absolute measurements are perceived as consistently maintaining the same size at all times. The absolute length units are outlined in the table below:
| Unit | Name | Explanation |
|---|---|---|
cm |
Centimeters | It is used to define the measurement in centimeters. |
mm |
Millimeters | It is used to define the measurement in millimeters. |
in |
Inches | It is used to define the measurement in inches.1in = 96px = 2.54cm |
pt |
Points | It is used to define the measurement in points.1pt = 1/72 of 1 inch. |
pc |
Picas | It is used to define the measurement in picas.1pc = 12pt so, there 6 picas is equivalent to 1 inch. |
px |
Pixels | It is used to define the measurement in pixels.1px = 1/96th of inch |
Example
In this instance, we are employing the font-size attribute to specify the values for paragraphs by utilizing the absolute length units mentioned previously.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<h1> Absolute units </h1>
<p style = "font-size: 20px;" > It has a font-size: 20px; </p>
<p style = "font-size: 1.2cm;" > It has a font-size: 1.2cm; </p>
<p style = "font-size: .7in;" > It has a font-size: .7in; </p>
<p style = "font-size: 18pt;" > It has a font-size: 18pt; </p>
<p style = "font-size: 2pc;" > It has a font-size: 2pc; </p>
<p style = "font-size: 10mm;" > It has a font-size: 10mm; </p>
</body>
</html>
Output
Relative lengths
Relative units are advantageous for styling a responsive website as they adjust proportionally based on the window size or the parent element. These units define a length that is relative to another specified length property.
Depending on the device, when there is significant variation in screen sizes, relative length units prove to be most effective as they scale more consistently across various display mediums. Employing relative units as the primary choice for responsive design ensures a seamless adaptation to diverse screen sizes without the need to constantly adjust styles.
The relative length measurements are presented in the following table:
| Unit | Name |
|---|---|
em |
It is relative to the font-size of the element. |
ex |
It is relative to the x-height of the font of the element. It is rarely used. The x-height is determined by the height of the lowercase letter 'x'. |
ch |
It is similar to the unit ex, but instead of using the height of the letter x, it measures the width of the integer "0" (zero). |
rem |
It is the font-size of the root element |
vh |
It is relative to the height of the viewport.1vh = 1% or 1/100 of the height of the viewport. |
vw |
It is relative to the width of the viewport.1vw = 1% or 1/100 of the width of viewport |
vmin |
It is relative to the smaller dimension of the viewport.1vmin = 1% or 1/100 of the viewport's smaller dimension. |
vmax |
It is relative to the larger dimension of the viewport.1vmax = 1% or 1/100 of the viewport's larger dimension. |
% |
It is used to define the measurement as a percentage that is relative to another value. |
Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
p{
line-height: 0.1cm;
color: blue;
}
</style>
</head>
<body>
<h1> Relative units </h1>
<p style = "font-size: 2em;" > It has a font-size: 2em; </p>
<p style = "font-size: 8ex;" > It has a font-size: 8ex; </p>
<p style = "font-size: 6ch;" > It has a font-size: 6ch; </p>
<p style = "font-size: 4rem;" > It has a font-size: 4rem; </p>
<p style = "font-size: 4vw;" > It has a font-size: 4vw; </p>
<p style = "font-size: 10vh;" > It has a font-size: 10vh; </p>
<p style = "font-size: 10vmin;" > It has a font-size: 10vmin; </p>
<p style = "font-size: 8vmax;" > It has a font-size: 8vmax; </p>
<p style = "font-size: 400%;" > It has a font-size: 400%; </p>
</body>
</html>
Output
CSS units: Time
Certain animation attributes necessitate values that represent time.
| Unit | Explanation |
|---|---|
s |
It is the duration of time in seconds. |
ms |
It is the duration of time in milliseconds.1ms = 1/100 of a second |
Example
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 200px;
height: 200px;
background: red;
border-radius: 50px;
transition-property: background, width, height;
transition-duration: 1s, 2s, 3s;
}
div:hover
{
width:300px;
background: blue;
height:300px;
border-radius: 80px;
}
</style>
</head>
<body>
<center>
<h2>Hover to see effects.</h2>
<div></div>
</center>
</body>
</html>
Output
CSS units: Angles
The CSS transform properties necessitate values to be specified in angles.
| Unit | Explanation |
|---|---|
deg |
It expresses the angles in degrees. |
grad |
It expresses the angles in gradians, i.e., 1/400 of a turn. |
turn |
It expresses the angles in turns, i.e., 360 degrees. |
Example
<!DOCTYPE html>
<html>
<head>
<style>
img
{
border:9px ridge gray;
border-radius:30px;
margin:10px;
transition-duration:2s;
}
#img1:hover{
transform: rotate(30deg);
transform-origin: bottom left 50px;
}
</style>
</head>
<body>
<center>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" id="img1"/>
</center>
</body>
</html>
Output