CSS Absolute Units
CSS Absolute Units
Absolute units are fixed, and the length expressed in any of these will appear exactly that size.
Absolute units do not change when the screen size change, and are not recommended for websites. However, they can be used if the output medium is known, such as for print layout.
The most used absolute unit is px (pixels).
| Unit | Description |
|---|---|
| px | pixels (1px = 1/96th of 1in) Try it |
| cm | centimeters Try it |
| mm | millimeters Try it |
| in | inches (1in = 96px = 2.54cm) Try it |
| pt | points (1pt = 1/72 of 1in) Try it |
| pc | picas (1pc = 12 pt) Try it |
Set Font Size With Px
Setting the text size with px (pixels) gives you full control over the text size.
If you use pixels, the web page may not scale very well on different screen sizes and the users cannot adjust the text size in their browser settings. However, users can still use the zoom tool to resize the entire page.
Example
Set font sizes with px:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}
Note: A whitespace cannot appear between the number and the unit. However, if the value is
0, the unit can be omitted.
When to Use Absolute Units
Absolute units are best used when:
- You need precise, fixed dimensions
- Designing for print media
- Creating elements that should not scale with the viewport
Tip: For most web design purposes, consider using relative units like em, rem, or viewport units for better responsiveness.
