Flash cards
Review the key moves
What is the main idea behind CSS Absolute Units?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-size: 40px;Put the learning moves in the order that makes the concept easiest to apply.
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;
}Live preview
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 em or rem for better responsiveness.