ColorCode

Relative sizing is huge. The first one I wanna show you is percentage.

Percentage

You can say:

p {
    width: 50%
}

That’s legit CSS. But wait, 50% of what? Good question... Say we have <p> tag which by default is a block level elements, I explain more here. So they take up the whole row. Their width is 100% of their parent. So by default it’s kind of like the <p> tag has an invisible rule on it that says width: 100%.

They just adjust to their containing parent element. Now what if I change the width to 50%? What if I add that to my CSS? Well, now it’s half the size. Wait, again... half the size of what?

In this case the containing parent of our <p> tag is the body. When I resize the window the body is getting smaller & bigger, but the width value that we gave our <p> tag stays 50%, relative to the body. Because it is its parent. So when I resize the window, my <p> tag will automatically resize itself to be 50% whatever the body is.

This is a technique used in responsive web design. It’s extremely useful. It’s not the end all be all, there are times where you don’t want a relative value, but if I used absolute values for width and height, my element might look great on one screen, but be completely unusable in a smaller device.

So it’s safe to say relative values are mostly used to support different screen sizes. I don’t want you to worry about responsive web yet, it’s a whole course in and of itself, and I promise we’ll get there.

There are other very important relative units I wanna show you, EM and REM. They are absolutely essential in sizing your text, something I brought up before. And that’s coming up next. Let’s go get it.