7.3 Pixels (and their less-used cousin the point) - Video Tutorials & Practice Problems

<v ->As useful as the other kinds of sizing are</v> that we'll be talking about in this chapter, pixels are fundamental. So we're gonna start with those. And we'll also briefly mention another kind of sizing element or a measure called the point. So what does a point we inquire? Why, why might you wanna know about it? <v ->Well a pixel, if we're being technical here</v> a pixel is defined as 196th of an inch. And a point is 172nd of a, an inch. In reality, because of different pixel densities and all that sort of stuff, it doesn't really work out that way. So, you know, one person's inch on the screen is a different than another person's inch. But the point came over from the world of print design and it is a valid unit that you can use but people just tend to not use it. <v ->Okay. So it's the kind of thing</v> where you can sort of look for it. <v ->Yeah exactly</v> <v ->If you see someone else's code then know it</v> <v ->Yeah. If you see PT instead of PX, that's a point.</v> <v ->Okay. But we're not gonna be using points</v> in this tutorial. Right? <v ->Right. And the point is that</v> that both of these are absolute units meaning they are telling the browser to color in a certain number of squares. <v ->Right.</v> <v ->And it's,</v> its hard coded just that number of squares. <v ->Okay. That, that seems</v> like it's still a useful thing to be able to do. But apparently there's some people who think that you should basically never use pixels. <v ->So right.</v> It, this is where, you know holy worse starts, that sort of thing. A lot of people have kind of taken an attitude of, well we should just never use pixels now because you know all these screens have different relative sizes and different densities. Um. And so they say things like, you know we should be using different relative units for all of them, but you know what there are times where you want something to display a certain way to a majority of users whether that's your mobile users or your desktop users. And sometimes you just want to use a pixel. I mean, sometimes it just makes sense. Like, you know, if, if it might be something where the font size could be changing in it and you don't want like your margins and padding, this is something we'll get it into and a little bit. But if you don't want the margins and padding to be changing with the font size, then sometimes it's good to use an absolute size that will lock that, that sizing down. <v ->All right. Let's take a look</v> at our sample application here. And let's take a look at a couple of things where we can use pixels. First of all, we're going to change this h2, here. We're gonna change the size of the font. So, it's like this and let's make it 30 pixels and see what that does. Just to give us a sense of the sizing, refresh it. That made it a little bigger. So this is one possible use for pixels. Is this a, a recommended practice for you? Do you like to use pixels for font sizes or, or not? <v ->It depends. (Instructor chuckles)</v> <v ->Okay. Of like so many things in CSS, that's a theme.</v> I think of Tutorial, isn't it? <v ->Yeah exactly. It depends on so much.</v> It's, it's hard to say until you actually see the usage. Um mm. If you're coming from a world where you spent a lot of time designing in Photoshop sometimes it helps to use these kind of units because the sizing will make sense to you. And so you can intuitively just pick things up but it depends. (Instructor chuckles) <v ->Right. But so we'll mainly be using other measures</v> for font sizes throughout the rest of the tutorial. Right? <v ->That's correct. Yeah.</v> <v ->Okay. So this is just, this is a good example</v> that to just to see how we can change the the font size using pixels. And let's look at another example we just as kind of offhand as a, as in a side change the width at some point. So let's look at another example of that. This is the width of the, the bio-box here. And let's take a look at what happens if we make this 200 pixels. So that's pretty squished here. So this, this just gives us an intuitive sense. This is 200 pixels across on this particular device. <v ->Right?</v> <v ->Right.</v> <v ->All right. We've got two examples here.</v> We've got the h2 with the font size and then the width here. But as we'll see later on in this tutorial in neither of these cases, do we really want to use pixels. And this is just to get an intuition for how they work but there are some cases where you definitely do wanna use pixels. So, what, what's a, a good example of that. <v ->Yeah. One of them that's mentioned in a text is that</v> when you're selling advertising space you're often selling a specific size ad, <v ->Right.</v> <v ->And you want it to be exactly that size.</v> So, this is a an ad that is a standard ad size that you might see on a lot of websites. <v ->Mm hm.</v> <v ->It's 728 pixels wide by 90 pixels high.</v> And if it were a different size you would want a different amount of money for it. Um. So you want to sell exactly the amount of pixels that you say you're gonna sell. So that's when you'd use, you know, hard absolute figure like pixels. <v ->All Right.</v> <v ->Yeah.</v>