The units for length generally fall into two categories: absolute and
relative. When crafting responsive designs, it is most often beneficial to use
relative units wherever possible. Many of the absolute units that have a defined
meaning outside of CSS (e.g.
pt, etc.) are rarely used –
usually for styles targeting printed media.
The table below describes some of the most common and useful relative CSS length units for screens.
|`em`||The calculated `font-size` of the element. If used on the `font-size` property itself, it represents the inherited `font-size` of the element.|
|`rem`||Like `em`, but represents the calculated `font-size` of the root element (e.g., the `html` element).|
|`vh` & `vw`||1/100th of the viewport's height and width, respectively|
|`vmin` & `vmax`||The minimum and maximum, respectively, of `vh` and `vw` (e.g., `vmin` = `vw` in portrait orientation, and `vmin` = `vh` in landscape)|
|`%`||Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also designates the quantity to which the percentage refers. This quantity can be a value of another property for the same element, the value of a property for an ancestor element, a measurement of the formatting context (e.g., the width of a containing block), or something else.|
While historically the most commonly-used length unit,
px is an absolute unit
which I highly recommend to avoid if possible. With modern-day devices of
varying size and pixel densities, the actual rendered size of a
px can be hard
to reliably predict and reason about.1
In fact, the CSS Spec itself quite eccentrically defines an abstract unit of measurement, the reference pixel:2
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).
I don’t think that any designer or developer wants to constantly think in terms
of a “nominal arm’s length” when specifying precise measurements for user
interfaces. For most applications, I recommend using a combination of
rems to specify size. A great benefit of these units is that they are
inherently responsive in design – your entire application, when sized in
rems, will adapt and scale proportionally with the default root font size
1 rem). Additionally, a single rule targeting the
font-size of the root
element inside of media queries can be used to tweak sizing across your entire
application at various breakpoints.
CSS supports several different ways to specify color values, though historically
for digital platforms colors are most commonly expressed in the
#RRGGBB), the value of each three
ff (0–25510). For example, “pure” green
would be expressed as
rgb(rv, gv, bv) where
bv are the
rgba() function allows for a fourth alpha parameter to change the
color’s opacity, expressed as a decimal float between 0 (fully transparent) and
1 (fully opaque).
Colors may also be specified in the
hsl() function, which takes three parameters: the hue angle as an
integer (0–360), then saturation and lightness each expressed as a percentage
(0%–100%). There is also an
hsla() function which supports a fourth alpha
While CSS defines color keywords – the literal name of colors – their use is
not recommended except in the cases of
calc() function can be used to perform calculations to determine
property values, like length. The result of the mathematical expression in the
function is used as the computed value for the property on which it is
The expression can combine the simple mathematical operators(
using standard operator precedence rules. You can use different units for each
value in your expression as well as nested expressions in parentheses.
calc() is especially advantageous when needing to prescribe property values
composed of different units (e.g.,
calc(80% - 2em)) or for more precisely
expressing values whose decimal floating-point representation is non-terminating
calc(100% / 3) instead of