Pixel Units4:11 with Guil Hernandez
When we use pixel units, the size we define will always remain the same and will not scale, regardless of the browser window and size of the screen.
Usually when defining a number value, we need to specify a length or 0:00 unit of measurement for that value. 0:04 If we don't, the browser will likely not know what to do with that number value. 0:07 So CSS offers different units for expressing length. 0:12 Some length units are more flexible than others. 0:15 For example, relative units and percentage units are always relative to other 0:18 length values, which makes it easier for 0:23 developers to layout content independently of screen size and resolution. 0:25 Meanwhile, absolute units, like pixels are always fixed in relation to each other. 0:30 They don't scale like relative units do. 0:35 As we learned in the previous lesson, many CSS properties take length or 0:38 percentage values for font size, padding, margin, widths and more. 0:42 When it comes to length values, there are several different unit types we can use. 0:47 There's relative length units and absolute length units. 0:52 Now we are gonna cover absolute units first. 0:56 So there are six absolute units in CSS but the most commonly used one and the one 0:59 we're gonna focus on is the pixel unit, which you might be familiar with by now. 1:05 When we use pixels the size we define will always remain the same and 1:10 will not scale regardless of the browser window and size of the screen. 1:15 So for example, if we go back to our workspace, and in our CSS file. 1:20 Let's scroll down and find the main header rule here under class selectors. 1:24 So if we gave our main header class a width and 1:30 set the width value to 960 pixels. 1:36 With this pixel value, the header will always take up 960 pixels of the screen. 1:40 So if we save our style sheet and go back to the browser preview and 1:46 refresh the page, we can see what that looks like in the browser. 1:51 It no longer takes up the full browser width, only 960 pixels. 1:55 And we can say the same about the pixel font sizes applied to our headings, 2:01 the pixel based border values, or any value defined with a pixel unit. 2:06 They will always remain a fixed size in relation to each other. 2:12 So pixels are a common unit in web design since they allow us to size and 2:16 position elements precisely on a page. 2:22 And they've always been the smallest unit in screen based design because it's 2:24 the smallest point a screen could physically display. 2:29 But now that pixel densities are increasing across devices and 2:33 display resolutions vary widely, the definition of a pixel has also changed. 2:37 Nowadays, the pixel unit in CSS doesn't really have anything to 2:42 do with physical screen pixels. 2:46 The CSS pixel is actually an abstract reference unit. 2:49 Instead of being solely based on device or hardware pixels, the way CSS pixels 2:53 are displayed has more to do with the pixel density of the viewing device. 2:58 For example, let's say that we give an element a width and height of 200 pixels. 3:03 When we view the design on a normal screen, it appears 200 pixels wide and 3:09 200 pixels tall. 3:14 But when we view it on a device that has twice the pixel density, we might notice 3:17 that the width and height of the element is actually now equivalent to 400 pixels. 3:22 Well, that's because if we define something as 200 pixels wide and tall, 3:28 we'll want it to look the same whether it's viewed on a standard display or 3:33 a high density display. 3:38 We wouldn't want the element to appear a lot smaller, 3:39 especially on newer displays with high pixel densities. 3:42 So if the pixel density of a device is higher from that of a typical display, 3:46 the display rescales the pixel values. 3:51 What that does is, it provides consistency across different devices. 3:54 That way, pixel units look relatively the same in 3:58 all viewing situations no matter the pixel density. 4:02 I have posted some good reference material about CSS pixels in the teacher's notes. 4:04
You need to sign up for Treehouse in order to download course files.Sign up