Units of measurement¶

In CSS, size (fonts, elements, etc.) can be represented in several different ways. In this section we will present the most popular ones, i.e .:

Pixels¶

We represent the size in pixels as px. By choosing pixels, the size of the element will be constant, regardless of external factors (such as device type or browser settings).

div {
    width: 100px;
}

Percentages¶

If we decide to present the dimension as a percentage, i.e. using the % sign, then this size is relative to the dimensions of the parent, e.g.:

div {
    width: 50%; /* half the width of the parent */
}

REM¶

To determine the size relative to the root of the HTML tree (or browser settings), we use rem. If we give an element a font size or font size equal to 1rem, it means that the dimension is equal to the font size of the root of the HTML tree. The example below shows how to increase the base font by 50%:

html {
  font-size: 10px;
}

.outer {
  font-size: 1.5rem; /* 1.5 * 10px = 15px */
}

EM¶

The quantity marked em, like rem, is a relative unit. This refers to the size of the direct parent. For example, if we give an element a size or set the font size to 1em, it means that the dimension is equal to the size of the parent (or the font used on the parent). The following example shows applying a size with em:

<div class="parent">
    Some parent text that will have size of 10px
    <div class="child">
        Child text that will be bigger that font in father
    </div>
</div>

.parent {
  font-size: 10px;
}

.child {
  font-size: 1.5em; /* 1.5 * 10px = 15px */
}

NOTE: Our site will be more "resistant" to changes if size is set with rem instead of em.

Viewport Width and Viewport Height¶

Briefly vw and vh, respectively. Both of these markings refer to the width and height of the browser window. The value 1vw means one hundredth of the window width, and 1vh - one hundredth of the window height, e.g .:

div {
  width: 50vw; /* Half the width of the browser window */
  height: 100vh; /* The entire height of the browser window */
}