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; |
Note
*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%; |
Note
Some values can be negative numbers, such as margin.
Note
If the value is zero, the unit can be omitted: width: 0px; can just be written as width: 0;.
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
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.