/ / What Is a CSS Unit: How Is It Used?

What Is a CSS Unit: How Is It Used?

A depiction of CSS Units and Types

A CSS unit is the standard of measurement used in CSS to express the size of a specific element’s property.

For instance, in the snippet below, a div element’s width property is set to 300px, where px is the unit, and 300 is the quantity of pxs (pixels).

div {
  width: 300px;
}

What is a unit?

A unit is anything accepted as a gauge for expressing the quantity or size of another thing.

So, for instance, to describe my laptop’s width, I could say, “my laptop is two A5-papers wide”.

In such a case, A5-papers is the unit used to express my laptop’s width. And the number “two” is the unit’s quantity used to depict my laptop’s width accurately.

Not all units are CSS units

Generally, you can use anything as a unit of measurement. However, you have limited options in CSS, as CSS is programmed to work with a selected few.

Types of CSS units

There are two types of CSS units: absolute and relative length units.

What are absolute length units?

Absolute length units are fixed standards of measurement.

The size of things expressed in any of the absolute length units will never change, regardless of the medium used to display them. As such, they work best with print outputs.

Examples of absolute length CSS units

Below are examples of the absolute length units used in CSS.

UnitNameEquivalence
cmCentimeters1cm = 96px / 2.54 = 37.795px
mmMillimeters1mm = 1 / 10th of 1cm
QQuarter millimeters1Q = 1 / 40th of 1cm
inInches1in = 96px = 2.54cm
pcPicas1pc = 1 / 16th of 1in = 12pt
ptPoints1pt = 1 / 72 of 1in
pxPixels1px = 1 / 96th of 1in

If you wish to create an inclusive app, it is best to avoid absolute length units as they are not accessible.

For instance, absolute length units make it less intuitive for users to change an app’s font size. As such, a limited vision user could find such types of software challenging to use.

Note

  • Pixels (px) is the only absolute length unit commonly used in programming.
  • Check out W3C’s Units of Length article for a detailed explanation of the reasons pixel (px) is an acceptable unit to use for screen outputs.

What are relative length units?

Relative length units are dynamic units.

The sizes of things expressed in any of the relative length units will always be dependent on another length. As such, they work best with rendering mediums, such as computer screens.

Examples of relative length CSS units

Below are examples of the relative length units used in CSS.

Element (em)

em scales an item relative to the font size of the element’s parent.

Example

2em means twice the current size of my parent element’s font size.

Note

em is the symbol for the “element” unit.

Root element (rem)

rem scales an item relative to the font size of the root element.

Example

3rem means thrice the current font size of the root <html> element.

Note

rem is the symbol for the “root element” unit.

em vs. rem

The difference between the em unit and the rem unit is that em scales an item relative to the element’s parent’s font size.

However, rem scales an item relative to the root element’s font size.

Example

In the snippet below, <div>’s width is set to 10em. As such, the em unit will scale the <div>‘s width to 400px (10 multiplied by 40px — the font size of <div>’s parent element (<body>)).

<html style="font-size:20px;">
  <body style="font-size:40px;">
    <div>I am a child of the body element.</div>
  </body>
</html>
div {
  width: 10em;
  border: 2px solid purple;
  background-color: thistle;
}

Try it on CodePen

However, in the snippet below, <div>’s width is set to 10rem. Therefore, the rem unit will scale the <div>’s width to 200px (10 multiplied by 20px — the font size of the root element (<html>)).

<html style="font-size:20px;">
  <body style="font-size:40px;">
    <div>I am a child of the body element.</div>
  </body>
</html>
div {
  width: 10rem;
  border: 2px solid purple;
  background-color: thistle;
}

Try it on CodePen

Percentage (%)

The percentage (%) unit scales an element relative to the size of the element’s parent.

Example 1

A font size set to 2% means “adjust my font size to two percent the current font size of my parent element.”

Example 2

An image’s width set to 50% means “adjust my width to fifty percent the current width of my parent element.”

Note

% is the symbol for the “percentage” unit.

em vs. %

The difference between em and the percentage unit is that em scales an item by multiplying the element’s parent’s font size by a number.

However, % scales an item by multiplying the element’s parent’s size by a percentage.

Example

In the snippet below, <div>’s width is set to 20em. As such, the em unit will scale the <div>’s width to 600px (20 multiplied by 30px — the font size of <div>’s parent (<main>)).

<html>
  <body>
    <main style="font-size:30px; width:400px;">
      <div>I am a child of the main element.</div>
    <main>
  </body>
</html>
div {
  width: 20em;
  border: 2px solid blue;
  background-color: lightsteelblue;
}

Try it on CodePen

However, in the snippet below, <div>’s width is set to 20%. Therefore, the percentage unit will scale the <div>’s width to 80px (20% multiplied by 400px — the width of <div>’s parent (<main>)).

<html>
  <body>
    <main style="font-size:30px; width:400px;">
      <div>I am a child of the main element.</div>
    <main>
  </body>
</html>
div {
  width: 20%;
  border: 2px solid blue;
  background-color: lightsteelblue;
}

Try it on CodePen

Fraction (fr)

fr scales an element relative to the fraction of available space in a grid container.

Example

grid-template-columns: 1fr 2fr 1fr; means divide the grid’s usable space into four (4) portions.

Assign one fraction (1fr) to the first column. Give two fractions (2fr) to the second column. And one fraction (1fr) of the space to the third column.

Note

  • fr is the symbol for the “fraction” unit.
  • The fr unit mainly works with CSS Grid Layouts.
  • Watch this short video for a practical illustration of the fr unit.

Element’s x (ex)

ex scales an element relative to the element’s parent’s x-height.

Note

  • ex is the symbol for the “element’s x” unit — where x is the lower-case letter x of the parent element.
  • People rarely use ex.

Character (ch)

ch scales an element relative to the width of the element’s font’s character zero (0).

Note

ch is the symbol for the “character” unit.

Viewport’s width (vw)

vw scales an element relative to 1% of the viewport/browser’s width.

Example

If the size of a viewport is 35cm wide, 1vw will imply 0.35cm — that is, 1% of 35cm.

Note

vm is the symbol for the “viewport’s width” unit.

Viewport’s height (vh)

vh scales an element relative to 1% of the viewport/browser’s height.

Example

If the size of a viewport is 19cm high, 1vh will imply 0.19cm — that is, 1% of 19cm.

Note

vh is the symbol for the “viewport’s height” unit.

Viewport’s minimum (vmin)

The vmin unit scales an element relative to the minimum dimension between the viewport’s width and height.

Note

vmin is the symbol for the “viewport’s minimum” unit.

Viewport’s maximum (vmax)

vmax scales an element relative to the maximum dimension between the viewport’s width and height.

Note

vmax is the symbol for the “viewport’s maximum” unit.

In Summary

A CSS unit is the standard of measurement used in CSS to express the size of an element’s property.

You may use both absolute and relative length units. However, if you care about accessibility, it’s best to make relative length units your primary choice.

Get Helpful Resources in Your Inbox

A CodeSweetly Digest

Similar Posts