Video Summary

Alright guys, in this lesson we’re gonna go over the units of measurement we’re going to use and CSS. And this is what we’re going to be able to use to define how large our fonts need to be. How why we want certain elements, how tall we want certain elements, what’s the spacing we want in between certain elements, and how we’re going to be able to accurately manipulate that. So I’m gonna go over the probably like the top five units of measurement that you’re going to encounter on a consistent basis. But in all actuality, I’d say 99% of the time, I only use pixels or percentages. And let’s say even if a web developer or WordPress developer used a different unit of measurement, you could always change that later for the unit of measurement you want to work with, and I’ve done that a lot, but you might run into certain things that they have set up or that you want to use, and I just want to be able to cover that and so lose that way you understand that when you run into those certain situations. Okay. So let’s just start off and I’d say pixels are probably the most commonly used unit of measurement when we’re talking about styling, is that because you get basically get one or one pixel in 196 of an inch, that’s the size of one pixel. So since it’s such a small unit of measurement, we can get very precise on how large or how big or small we want these elements. We’re not dealing with a variable. We’re saying we want this element to be this exact size right. Now, percentages are probably the second most common one that I use, and I think most developers use them as well because we can actually give it gives a relative size so that way no matter what screen size someone’s on, it will take up that much space. So maybe we want a heading to take up 50% of The Real Estate have that have a webpage or their device that they’re looking on. And we want it centered so anything no matter what device will always take up 50% of that screen. 

Now E M is kind of a lazy man’s way to increase the size of pretty much it’s mainly used for fonts and sometimes pictures, but basically mostly fonts because if you think about if you’re talking between two different screen sizes, maybe mobile and the desktop version, is that if the font size for heavy and say it’s the main heading was let’s just say 50 pixels, which is fairly large. 

You know that that’s going to look a lot different than on a mobile phone. Maybe we want that two times smaller or you know two times larger on the desktop. And that’s what that is. So if you put into them, you’re gonna have that element two times the size and if it’s negative to them, it’s negative two times the size. So let’s say if it’s 10 pixels and you put to them, that size would now be 20 pixels, and if you did negative to them, that the font size wouldn’t be saying negative five pixels or not native fiber, just five pixels, right? So now there’s the view height and the view width. And that is the percent or relative percentage of the relative height and width on the screen that your website’s being viewed on. And how is that different from percentages? So I want to go over and just show you a quick idea of what that’s going to entail. So So basically, when you look at a website, and you say you have three services that you want to promote, okay, and this is a very common thing on most home our home pages is that you have you know, your column one and you have like a little card here, column two, column three. Alright, so this right here is the full-screen size of whatever the device is, whether it be a mobile phone or a desktop, or a laptop, however, the screen is this is the hunt this is the view with the full width or the 100% like so if it’s 100 view lifts that’s 100% of the screen right now, there was one that is is that these are all these could all be the same units of measurement very much like we use for colors, you know, we could use red we could have that same color be a hexadecimal color. We could have that same color bit RGB on the same thing with units of measurement. So 250 pixels can be the same size as 80%. And then now here’s the thing too, is now this is saying it’s 80% wide within the relative size of where the elements are being placed. So this is like so each one, this is column one, this is column two, this is column three. What we’re seeing here is that this column has 80% within the element that it’s actually working with, right? So we’re placing that in this column, and we want to, you know, if it was from this side or this side, that’s 100% and we’re saying we just want 80% So we got you know, maybe 10% Over here, 10% over there. So if we had this as 80 view heights or view width, right, it would basically mean it has to be 80% of what our what the screen they’re looking on. Alright, so so that’s why over here, you know, 80% of this column is the same sizing right as 250 pixels as this one, and this could be 10 views, this could actually mean this is the size we want here. So as you can see when you’re sizing out elements, when you’re actually on a webpage and you’re actually working with the view width doesn’t really work that well. I’d rather use percentages, or I rather use pixels because at least this way with pixels, I can define that. This is how big I want this box right now percentages are more or less saying hey, I want to have I wanted to be 80% wide, but I want to have like 10% here and there. So no matter if it’s on a, you know, a laptop or a mobile, I want these relative percentages. So that’s kind of the difference between all of them. and again, you’re probably not going to run into view heights or views with that often. but you might and there is a time in place for that. 

And we’ll go you know, we’ll go over that or in like the code pen version bit is want to have at least a little bit of visualization and some understanding because I understand that without actually looking at and understanding the difference between a percentage and the relative percentage. it can get a little confusing. so with that being said, let’s hop over to code pen and start playing with these units of measurement.