Written by Andrei MoraruSep 24, 2020

"Learning CSS with Less" tutorial series gets better and better with each article. Each part of this series comes as a new piece from a whole tech puzzle - and we really feel that the passion and dedication with which Andrei created this course are the keys that will make this puzzle a successful one, in the end, empowering you to start a new professional journey. 

We created the Technical Blog section out of a desire to share the knowledge gathered over the years of hard work by senior developers from our community - helping you become one of the top 1% software developers in the world. 

Note: You can find the other chapters of the course in the Tech section of our blog - here.

Now... Let's discover the next part of "Learning CSS with Less". Enjoy!

  1. Topics of discussion
  2. Pixels and percentage measuring units
  3. Relative measuring units
  4. Viewport measuring units

1. Topics of discussion

In this tutorial, we are going to discuss the many types of measuring units we can use in CSS. So, let's have some fun.

2. Pixels and percentage measuring units

There are many ways in which you can specify the size of a CSS property. Up until now, we have used percentage and pixel values. These are the most common ways in which dimensions are specified.

What is the difference between them? Well, let's start with pixel measuring units. The value you pass is a fixed one. As you know, a pixel is a measuring unit for your screen's resolution. If your phone specs say that it has a resolution of 320x480 pixels and you place an element with a width of 160px on your web page, then that element would occupy half of the available width of a line on your web page.

Should you view the page on a screen with a higher resolution, then the element will have the same width, though it will appear smaller because of the fact that there are more pixels available, so to speak.

Pixel values tend to get a bit annoying if you're not careful because they don't care about element borders. For example, if you have a parent element with a maximum width of 500px and inside of it you place an element with a width of 600px, then that child element will overflow.

Here's the code for the scenario for you to test:

Item 1

And here is the CSS for it:

.pixel-container {
  max-width: 500px;
  height: 50px;
  border: 1px solid black;
  .pixel-item {
    width: 600px;
    height: 40px;
    border: 1px solid red;
  }
}

Percentage units are far easier to incorporate because you cannot go over 100%. Let's consider the same scenario as above, only this time we are going to use percentage values:

Item 2

And here is the CSS for it:

.percentage-container {
  max-width: 90%;
  height: 50px;
  border: 1px solid black;
  .percentage-item {
    width: 100%;
    height: 40px;
    border: 1px solid red;
  }
}

So, why is this the case? Well, the answer is simple. Percentage based values have to be calculated based on something. And something is the corresponding property of the parent element.

In our case, we give the percentage-item class a width of 100%. That 100% is going to be calculated based off the width of the parent element. But wait, the parent element does not have a width property value, what will it do? Well, the percentage-container class has a max-width defined on it though, so the browser uses that 90% as being considered 100% since you do not specifically set a width value. And of course, that 90% is based on the max-width of your screen. As a result, when using percentage-based units, overflowing elements should not be an issue.

Pixel values do have their uses though. For example, you can set font sizes in pixels and you can use them to specify the width and height of an image if you are using it as background since CSS cannot detect them when using the image as a background through the URL function. Of course, you can use it on elements such as buttons and text inputs as well.

Before we continue, I think it's worth noting that pixel and percentage values for CSS properties also accept floating-point numbers, though for pixels it's not that common.

3. Relative measuring units

Relative measuring units are of two types: rem and em. The difference is the following:

In practice, you may want to prefer rem values to em values, because for rem values the value for child elements will always be computed by using the same base size. For em values, if you are not careful, things can get really tiny (or large) really quick. Here's an example illustrating this, using font sizes:

EM Item 1
EM Item 2
REM Item 1
REM Item 2

And here is the CSS for this:

.pixel-container {
  max-width: 500px;
  height: 50px;
  border: 1px solid black;
  .pixel-item {
    width: 600px;
    height: 40px;
    border: 1px solid red;
  }
}

.percentage-container {
  max-width: 90%;
  height: 50px;
  border: 1px solid black;
  .percentage-item {
    width: 100%;
    height: 40px;
    border: 1px solid red;
  }
}

.em-container {
  font-size: 1em;
  .em-item {
    font-size: 0.75em;
  }
}

.rem-container {
  font-size: 1rem;
  .rem-item {
    font-size: 0.75rem;
  }
}

These measuring units can be used for any and all properties that can have dimensions associated to them (e.g. widthheightmargin etc.). Font size is just the most common place where you see them used.

4. Viewport measuring units

And finally, we arrive at viewport measuring units. These units also fall under the category of relative measuring units, but in a different fashion. Rather than relying on a parent or root element, these units will be computed based on the viewport. By viewport, we refer to the visible area of the webpage, which is affected by the maximum size of your screen or the maximum size of the browser if you don't have the window maximized.

There are four viewport units:

Viewport units are fairly useful if you want to make sure that an element in your page has a certain size based on the size of the device the web page is viewed on, as you may have guessed.

Here is an example:

Viewport Item

And here is the CSS code:

.viewport-container {
  width: 50vw;
  height: 40vh;
  border: 1px solid black;
  padding: 10vw;
}

And that about covers it for this tutorial. In the next one, we are going to talk about media queries. See you then.

Interested in finding out more about the author? Andrei's world is just a click away!

Interested in working with a team of expert remote developers? Contact us TODAY!