Understand Units in CSS: A Comprehensive Guide
Understand how to use absolute and relative lengths, angle units, time units, frequency units, and more.
CSS (Cascading Style Sheets) is a crucial component of modern web design. It’s the language that gives your website its look and feel. But to truly master CSS, you need to understand the units it uses to measure things like length, angle, time, and resolution.
In this guide, we take a look into each type of CSS unit, providing an explanations and practical examples to help you grasp their usage. We’ll cover everything from absolute and relative length units like px, em, rem, and viewport units like vw, vh, to more specialized units like degrees deg for rotation, seconds s and milliseconds ms for animation durations, and even dots per inch dpi for resolution.
By understanding these CSS units, you’ll gain more control over your layouts, leading to more precise, responsive, and visually appealing designs.
1. Absolute Lengths
px (Pixels)
This is the most commonly used unit in web design. A pixel represents a single point on a computer screen.
Example: font-size: 16px; sets the font size to 16 pixels.
cm (Centimeters)
This unit is not commonly used in web design because screen sizes and resolutions vary greatly between devices. However, it can be useful for print media.
Example: width: 10cm; sets the width of an element to 10 centimeters.
mm (Millimeters)
Similar to centimeters, millimeters are not commonly used in web design but can be useful for print media.
Example: width: 100mm; sets the width of an element to 100 millimeters.
in (Inches)
This unit is also more useful for print media than web design.
Example: width: 4in; sets the width of an element to 4 inches.
pt (Points)
Points are traditionally used in print media (1 point is equal to 1/72 of an inch). In CSS, points are useful for creating styles that can be printed with precision.
Example: font-size: 12pt; sets the font size to 12 points.
pc (Picas)
A pica is equal to 12 points. It’s another unit that’s more commonly used in print than in web design.
Example: font-size: 1pc; sets the font size to 12 points.
Absolute length in CSS:
Here’s an example of how these units might be used in a CSS rule:
div {
width: 300px;
height: 20cm;
padding: 5mm;
border: 1in solid black;
font-size: 14pt;
margin: 1pc;
}
Code explanation:
The div element would have a width of 300 pixels, a height of 20 centimeters, padding of 5 millimeters, a border that’s 1 inch wide, a font size of 14 points, and a margin of 1 pica.
However, keep in mind that these units may render differently on different screens and devices due to varying pixel densities and screen sizes.
2. Relative Lengths
em
This unit is relative to the font-size of the element.
Example: If an element has a font-size of 16px, then 1em = 16px for that element. If you set margin: 2em;, the margin will be twice the current font size.
rem
This unit is relative to the font-size of the root element (usually the <html> element). If the root element has a font-size of 20px, then 1rem = 20px for any element on the page.
Example: font-size: 1.5rem; will set the font size to 1.5 times the font size of the root element.
ex
This unit is relative to the x-height of the current font (roughly the height of lowercase letters). It’s not commonly used.
ch
This unit is equal to the width of the “0” (zero) of the current font.
Example: width: 20ch; will make an element 20 “0” characters wide.
vw (Viewport Width)
This unit is equal to 1% of the width of the viewport.
Example: width: 50vw; will make an element 50% as wide as the viewport.
vh (Viewport Height)
This unit is equal to 1% of the height of the viewport.
Example: height: 70vh; will make an element 70% as tall as the viewport.
vmin
This unit is equal to 1% of the smaller dimension (width or height) of the viewport.
Example: font-size: 4vmin; will set the font size to 4% of the viewport’s smaller dimension.
vmax
This unit is equal to 1% of the larger dimension (width or height) of the viewport.
Example: font-size: 4vmax; will set the font size to 4% of the viewport’s larger dimension.
%
This unit is relative to the parent element.
Example: If you set width: 50%;, the element will take up half the width of its parent element.
Relative length in CSS:
Here’s an example of how these units might be used in a CSS rule:
div {
font-size: 2em;
padding: 1.5rem;
width: 75vw;
height: 50vh;
margin: 5vmin;
line-height: 200%;
}
Explaination:
The div element would have a font size twice that of its parent, padding 1.5 times the root font size, width 75% of the viewport width, height 50% of the viewport height, and a margin of 5% of the viewport’s smaller dimension. The line height is 200% of the current font size.
3. Time Units
s (Seconds)
This unit represents a time duration in seconds. It’s commonly used with animation and transition properties.
Example: animation-duration: 2s; would make an animation last for 2 seconds.
ms (Milliseconds)
This unit represents a time duration in milliseconds, where 1000 milliseconds equals 1 second. It’s also used with animation and transition properties.
Example: transition-duration: 500ms; would make a transition last for 500 milliseconds, or half a second.
Time units in CSS #1:
Here’s an example of how these units might be used in a CSS rule:
div {
transition: background-color 0.5s ease-in-out;
animation: move 2s infinite;
}
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
Code explanation:
The div element would have a transition that changes the background color over 0.5 seconds, and an animation that moves the element from its current position to 100 pixels to the right over 2 seconds. The animation repeats indefinitely due to the infinite keyword.
Time units in CSS #2:
Another example could be a delay in transition or animation:
div {
transition: all 2s ease 1s; /* transition will start after 1 second delay */
animation: spin 4s linear 0.5s infinite; /* animation will start after 0.5 second delay */
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Code explanation:
The div element has a transition that starts after a delay of 1 second and an animation that starts after a delay of 0.5 seconds. The animation makes the div spin indefinitely.
4. Resolution Units
Resolution units in CSS are used to specify the pixel density of output devices. They are primarily used in media queries to serve different styles to devices with different pixel densities.
dpi (Dots Per Inch)
This unit represents the number of pixels per inch.
Example: A a media query like @media (min-resolution: 300dpi) {...} would apply the styles in the curly braces only to devices with a pixel density of at least 300 dots per inch.
dpcm (Dots Per Centimeter)
This unit represents the number of pixels per centimeter. It’s similar to dpi, but uses centimeters instead of inches.
Example: @media (min-resolution: 118dpcm) {...} would apply the styles to devices with a pixel density of at least 118 dots per centimeter.
dppx (Dots Per px Unit)
This unit represents the number of dots per CSS pixel unit. A CSS pixel might correspond to multiple physical pixels on a high-density display.
Example: @media (min-resolution: 2dppx) {...} would apply the styles to devices with a pixel density of at least 2 dots per CSS pixel unit.
Resolution Units in CSS:
Here’s an example of how these units might be used in a CSS rule:
@media (min-resolution: 2dppx) {
body {
background-image: url("high-res-background.png");
}
}
@media (max-resolution: 1.5dppx) {
body {
background-image: url("low-res-background.png");
}
}
Code explanation:
Devices with a pixel density of 2 dots per CSS pixel unit or higher would use the high-resolution background image, while devices with a pixel density of 1.5 dots per CSS pixel unit or lower would use the low-resolution background image.
5. Angle Units
Angle units in CSS are used to specify rotation and direction. They are often used with properties like transform and gradient.
deg (Degrees)
This unit represents an angle in degrees.
Example:
transform: rotate(45deg); would rotate an element 45 degrees clockwise.
grad (Gradians)
This unit represents an angle in gradians, where 100 gradians equals a right angle.
Example:
transform: rotate(100grad); would rotate an element 90 degrees clockwise.
rad (Radians)
This unit represents an angle in radians, where 2À radians equals a full circle.
Example:
transform: rotate(3.14159rad); would rotate an element 180 degrees.
turn
This unit represents a full circle.
Example:
transform: rotate(0.5turn); would rotate an element 180 degrees.
Angle Units in CSS:
an example of how these units might be used in a CSS rule:
div {
transform: rotate(45deg);
}
div:hover {
transform: rotate(0.5turn);
}
Code explanation:
The div element would be rotated 45 degrees by default. When you hover over the div, it would rotate 180 degrees (0.5 of a full turn).
Bonus: Flex
fr (Fractional Unit)
This unit is used with CSS Grid Layout and represents a fraction of the available space in the grid container. If you have a grid with two columns defined as 1fr 2fr, the first column will take up one third of the available space, and the second column will take up two thirds.
Example:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}
The total available space is divided into 3 equal parts (1fr + 2fr = 3fr), the first column takes up 1/3 of the space, and the second column takes up 2/3 of the space.