CSS Units Explained w/ Examples

Hey there! Before writing this blog, I had a very little understanding of various CSS units & what they actually represent. And as they say -

If you don't understand a particular topic, write a blog about it!

So I put on my learning cap & here's what I understood so far-

The CSS Units are divided into 2 Categories - Absolute Units & Relative Units. But what do they mean ?

Absolute Units - The absolute units always indicate a fixed length. Units that are “absolute” are the same size regardless of the parent element or window size. This means that whenever an element is set with a property absolute, the size of that element would look the same when looked at on a phone or on a large monitor (and everything in between!)

Relative Units - Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport, etc. depending upon the unit used. Relative units are useful for styling responsive sites.

Now let's dive into the units & their examples.

Please Note - I've used Inline Styling only for the sake of convenience to know which css properties are applied. Always prefer using a separate stylesheet for your CSS

MASTER CSB For Examples - You can refer to this CSB after reading the description for respective units 😊

For Absolute Units, I'll only discuss about pixels, since it is a commonly used absolute unit

Pixels - Pixels are very straightforward, they say what they are going to do.

Take a look at the example below. This will render a 500px block with a red background that has a 14px & 30px font-size paragraph in it. Even if you change your font-size settings in chrome appearance settings, you can observe that the font size doesn't change, it stays fixed.

<div
        style={{ width: "500px", backgroundColor: "red" }}
        className="pixels-example"
      >
        <p style={{ fontSize: "14px" }}>Pixels Example</p>
        <p style={{ fontSize: "30px" }}>Pixels Example</p>
 </div>

Hence pixels are really bad for accessibility & will bite you if you continue to use it throughout your entire application. What pixels are good for is when you want something to look exactly the same width and height despite the user's browser settings. A good use case for pixels is when you are defining a border. You probably want that border to always be the same.

Now, let's look into Relative Units. Relative units can be a little more difficult than absolute units in determining which to use, so let’s go through your options in detail.

Percent (%) - Percent is Relative to the parent element’s value. Look at the example below to get a better understanding

<div className="percent-example">
        <p
          style={{
            fontSize: "1.6rem",
            width: "100%",
            backgroundColor: "black",
            color: "white"
          }}
        >
          This is the Parent Div
        </p>
        <div
          style={{
            fontSize: "1.6rem",
            width: "40%",
            backgroundColor: "black",
            color: "white"
          }}
          className="child-div"
        >
          <p>This is 40% of its parent div</p>
        </div>
</div>

Since we used percentages it is going to be responsive by default. Try resizing your browser’s width. This would not be responsive if you used pixels, rem or em to define the widths. What is nice about the usage of percentages, is that when you change the parent’s width the children will still behave in the same way. Percentages are very useful for defining layouts.

REM - In most cases you would want to use the rem unit. Rem is an absolute unit relative to the root element of the HTML document and is commonly used for font sizes. It is a scalable unit in which the browser renders into pixel values. The default root element font size is 16px. It is recommend for responsiveness with the help of @media & changing the html font-size for the required min/max widths.

In the following example- We have set the html font size as 10px in styles.css & set the font size as 1.6rem & 3rem respectively.
Now, if you inspect & check for the font size of the example, you can see that the font-size are now relative to the font-size of the html tag i.e 1rem = 10px

<div
        style={{ width: "50rem", backgroundColor: "red" }}
        className="rem-example"
      >
        <p style={{ fontSize: "1.6rem" }}>REM Example</p>
        <p style={{ fontSize: "3rem" }}>REM Example</p>
</div>

EM - em is also an absolute unit but unlike rem unit, it is relative to the immediate parent element. It can also be used for font sizes but can lead to unexpected results because it is relative to the immediate parent.

Let's look into the example -

There is a parent div with the font-size of 24px, we created a p tag with font-size of 2em, which would be 2x24 = 48px. Now, we created a child div with font-size of 12px which would be an immediate parent to our next p tag. Now giving the same font-size of 2em to this p tag, we can observe that it is relative to the immediate parent & not the top most parent div. When to use EM ? The only reason you’ll need to use em units is to scale an element which has non default font sizing. Design components like menu items, buttons, and headings may have their own explicitly stated font sizes. If you change these font sizes, you want the entire component to scale proportionately. Typically don’t Use em Units for font sizes, designs are more manageable if rem units are used for font sizing.

      <div style={{ fontSize: "24px" }} className="em-boxes">
        <p style={{ fontSize: "2em" }}>This is 2EM example</p>
        <div style={{ fontSize: "12px" }} className="immediate-parent">
          I am Immediate parent of below div
          <p style={{ fontSize: "2em" }}>This is also an 2EM Example</p>
        </div>
      </div>

If you've read so far till the blog, Congratulations! Now you know how the most recommended relative units work. Also, thank you for reading so far! But we're not just done yet- let's look into couple of more very interesting relative units

FR - fr stands for fractional unit. This unit is often used in combination with grids. Let’s take a look at the grid we defined in the example

      <div className="grid">
        <div>Div one</div>
        <div>Div two</div>
        <div>Div three</div>
      </div>

.grid {
  font-size: 2rem;
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  background-color: red;
}
.grid div {
  background-color: red;
}

The column sizes get defined by the grid-template-columns property. There is a total of 5fr, which means that 1fr will come down to 20%. This means that the column widths will be 20%, 40%, and 40% respectively. Fr is a really nice unit to use because it takes a lot of the math out of the way. You can change the amount of fr’s in the grid and the size of 1 fr will automatically get figured out for you. This is why you could, and maybe should, prefer them over percentages when defining a grid.

And the last one......

VW & VH - The vw and vh units, stand for viewport width and viewport height. No matter where you are, inside a child div or in a grand grandchild div, the vw and vh will always be the width and height of the viewport. Viewport is the size of your window. In the example you can see that it took the width & height equivalent to that of your window / viewport

<div
        style={{ backgroundColor: "black", width: "100vw", height: "100vh" }}
        className="viewport-example"
      >
</div>

Thank you for reading this blog, I hope you learned something out of it or it was a good revision for you.

To be honest, I am at an Intermediate level when it comes to CSS, so I would be more than pleased to read your approaches & hack when it comes to using different CSS units for different elements.