- Categories: CSS Reference, CSS Resources, Reference
Quick Reference
CSS has several different units for expressing a length either as an absolute value or relative to another element’s value or the screen size itself.
p {
font-size: 2em;
}
Absolute Lengths
Absolute length units are fixed, and the length expressed in any of these will appear at exactly that size regardless of the screen size. This can cause issues because screen sizes vary so much from the very large to the small mobile device. Often, relative lengths would be a better choice.
| Unit | Description | Example |
|---|---|---|
| cm | centimeters | width: 2cm; |
| mm | millimeters | width: 20mm; |
| in | inches (1in = 96px = 2.54cm) | width: 2in; |
| px * | pixels (1px = 1/96th of 1in) | width: 96px; |
| pt | points (1pt = 1/72 of 1in) | width: 72pt; |
| pc | picas (1pc = 12 pt) | width: 24pc; |
*the density of pixels varies from screen to screen depending on the device and/or manufacturer
Relative Lengths
Relative length units specify a length relative to another element’s length property or even the screen size itself. Relative length units scale much better between the varying screen sizes.
| Unit | Description | Example |
|---|---|---|
| em | Relative to the font-size of the element (3em means 3 times the size of the current font) | width: 6em; |
| ex | Relative to the x-height of the current font (rarely used) | width: 6ex; |
| ch | Relative to the width of the “0” (zero) | width: 6ch; |
| rem | Relative to font-size of the root element | width: 6rem; |
| vw | Relative to 1% of the width of the viewport (browser window size) | width: 6vw; |
| vh | Relative to 1% of the height of the viewport (browser window size) | width: 6vh; |
| vmin | Relative to 1% of the viewport’s (browser window size) smaller dimension | width: 60wmin; |
| vmax | Relative to 1% of the viewport’s (browser window size) larger dimension | width: 60vmax; |
| % | Relative to the element’s parent element | width: 60%; |
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
