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 | Name | Description | |
|---|---|---|---|
| px | Pixels | The most used absolute unit for screens (1px = 1/96th of 1in) | |
| cm | Centimeters | Primarly used in print stylesheet | |
| mm | Millimeters | Primarly used in print stylesheet | |
| in | Inches | Primarly used in print stylesheet (1in = 96px = 2.54cm) | |
| pt | Points | A typographical unit (1pt = 1/72 of 1in) | |
| pc | Picas | A print unit (1pc = 12 pt) |
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
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 17px;
}
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 can be 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
emorremfor better responsiveness.
