CSS Tutorial — Relative Sizes, Percentage % (7/13)

CSS Tutorial — Relative Sizes, Percentage % (7/13)

Relative size is huge. The first one I wanna show you is percentage. AAAAAA this is a good one. You can say width: 50%. That’s legit CSS. But wait, 50% of what? Good question...
Say we have P tag. I’ll give it a red background so we can see where it starts and where it ends. You should do that too. P tags by default are 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 kinda like the P tag has an invisible rule on it that says width: 100%.
They kinda just adjust to their containing parent element. Now what if I change the width to 50%; What if I add that to my CSS? BOOM. Look at that. 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, I’ll add a green border to body so you can see. 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’s 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 already. And that’s coming up next. Let’s go get it.