CSS Units

[00:00:00]
>> Jen Kramer: And there are a lot of questions in Slack and here in the classroom about units of measure in working in CSS. So yesterday I mentioned that the best units of measure to be using for your website designs and there are a lot that are possible. But the best ones and the ones that the professionals are using, especially for responsive design include rem, and percent.

[00:00:23]
Those are the three big ones that you're going to see in use now. There's a lot of other ones, believe it or not, there's pixels, which are something we tend not to use as much anymore, there's points those are possible but points are for print. We don't use points in web design.

[00:00:38]
You might use them in a print style sheet, which is a thing which we're not going to talk about. There are millimeters and centimeters, those are things, there are inches. I don't know why you would ever use any of those in your CSS but you can. And so the things that we really want to focus on then are Rem, and percent.

[00:00:57]
And so the big question was what is the difference between Rem and? So rem, as I said, was root relative where i talked about this yesterday. Ems were very much an adaptive type of measurement, depends on where you are on a particular webpage as one is defined. So, I just dropped this code pen url, I just rip this up on the break.

[00:01:23]
We're looking at a h1 and a paragraph here. And I put in a little bit of styling, I put in some background color, so you can see what's going on here, okay? So what I'm gonna do here now, for my h1, I'm gonna put in padding of one just regular old.

[00:01:44]
One around my h1 and you will see what I get there. Now I am gonna put one of padding around my paragraph. Do those look like the same amount of padding? Anyone bothered by the fact that they're significantly more on the green one than there is on the blue?

[00:02:09]
That's weird isn't it? But it has to do with the way works as a unit of measure. So is relative to the lowercase letter m. That the width of the lowercase letter m that is one m, and obviously a lowercase letter m and an h1, by default is much bigger.

[00:02:29]
And therefore the padding around that h1 is much bigger than what you're going to see in a lowercase letter m and just a plain old paragraph with the default sizing set, right? So you see how those don't even line up or anything. But if I change my ems here in my padding to rems, look how nice and neat everything lines up now.

[00:02:53]
So this is as they say a root relative. In other words, they're going back to an being defined as the size of. What is the font size of the root tag of the document root being the very first tag? What is the first tag in your document? After doc type?

[00:03:14]
HTML. So what is the size of the font for HTML by default? 16 pixels. And we scale up from there for the h1s and down. So if I say one of padding here for my h1, at one rem of padding for my h1 in one rem of padding for my paragraph and we're now talking about exactly the same amount of space, not a relative amount of space.

[00:03:40]
But an absolute amount of space and so you can really see the difference here in this example. Okay yeah.
>> Speaker 2: Why is there less padding on the left hand side of each of those than on the top in the bottom?
>> Jen Kramer: Less on the left rather than on the top and the bottom.

[00:03:54]
>> Speaker 2: Yeah.
>> Jen Kramer: That is because that's a great question actually. Why do you think?
>> Speaker 3: And it is wider than it is tall?
>> Jen Kramer: Then is wider than it is tall? Close but not qiute. Remember the h1 has got some margin on it.
>> Speaker 3: Earlier you used Pixel.

[00:04:19]
>> Jen Kramer: For borders. For borders.
>> Speaker 3: Okay.
>> Jen Kramer: Yeah.
>> Speaker 3: And so for is that because one rem would be too big or can you use it part of a rem like half around.
>> Jen Kramer: You absolutely could put in. I mean we could make a border here of one rem solid orange.

[00:04:39]
That's a really big border, right? So we could reduce that in size, we could reduce it to 0.5 rem, we could reduce it to 0.01 rem. That's pretty thin.
>> Jen Kramer: 0.1rem, okay. So we can do all of that and that's fine. But borders in my mind are something that aren't necessarily scaling like text does depends on your device like it's really important that text scale on your device so it's readable across tiny devices, big devices and borders are kind of decorative.

[00:05:16]
So I tend to stick with pixels in borders because that is reflecting like I want to really thin one, through thin line. But you can absolutely do your borders in rems as well. That's not a problem. I think you'll see most people in the industry using pixels for border.

[00:05:32]
That's like one of the only places that we use them.