7.2 Introduction to sizing - Video Tutorials & Practice Problems

alright now that we've taken a look at some of the color values that are common in C. S. S. We're going to spend the rest of this chapter on one of the most important kinds of values in web design and development which is sizing. We talked in the last section about picture elements or pixels and we changed the color of those. Uh And that's certainly one of the most common sizing elements as well. But lee why don't we want to use pixels for everything? Well the big problem with pixels, I used the analogy of graph paper before um and it makes sense that you'd want to use pixels because it's you know just choose which parts of the graph paper you want to light up. But modern devices don't all have the same size grid. So your monitor which this image is showing on the left might have very large grid squares. Whereas your phone on the right might have very small grid squares. So what that means is that to make things look as similar as possible or as functional as possible. Across devices with modern development you want to use more relative sizing which is units that instead of saying make a five pixel by five pixels square you say make something that takes up you know some percentage of the space of the screen. The reason for that is that if you made a five pixel by five pixels square on the monitor on the left it would be pretty big. It would be a pretty large chunk of of what you're seeing there. Whereas if you did five pixels by five pixels on the phone on the right, it would be a tiny tiny tiny little square, that would be barely visible. So we're getting into one of the more complicated parts of CSS early is one of the things that people find complicated. Um the actual underlying principles aren't very hard. It's more people have a lot of ideas about how you should do things, which means we're going into Holy War territory here. What does DP I stand for here? Dots per inch, Which is just the number of grid squares per inch. Okay, so dot is a pixel in this context? Right. So we see here this is a much lower number of dots per inch on a monitor. This is intermediate, like maybe a, like an ipad or something. And then on like an iphone you would have much higher resolution. So we're going to have to be using not just pixels which we will be covering, but also other ways of determining sizing on the web to to meet these design constraints. Right. Exactly.