NOTE This file was generated by Descript 1 00:00:00,079 --> 00:00:01,609 Hi guys and welcome back. 2 00:00:01,850 --> 00:00:04,900 In this video, let talk about CSS units. 3 00:00:05,260 --> 00:00:06,636 And the first one is the pixel. 4 00:00:06,660 --> 00:00:09,719 In terms of hardware, a pixel is a light-emitting unit 5 00:00:10,050 --> 00:00:13,219 capable of displaying full color independently of its neighbours. 6 00:00:13,219 --> 00:00:14,599 So that there is the definition. 7 00:00:14,679 --> 00:00:18,843 You've got a pixel and that can produce red, green, and blue light. 8 00:00:19,378 --> 00:00:24,368 In CSS, pixels don't directly map to hardware . In CSS,there's a 9 00:00:24,388 --> 00:00:27,898 degree of scaling so the high pixel density displays can still display 10 00:00:27,898 --> 00:00:29,608 objects and an appropriate size. 11 00:00:29,608 --> 00:00:31,738 So here's an example of an iPhone 11 pro. 12 00:00:32,098 --> 00:00:37,648 The actual size is 1125 by 2436, so it's a massive display, but because 13 00:00:37,648 --> 00:00:43,258 it's such a small device in CSS terms, we treat it as being 375 by 812. 14 00:00:43,794 --> 00:00:48,285 Pixels are pretty useful and they generally work well across devices. 15 00:00:48,404 --> 00:00:50,324 So it's something that we do use quite often. 16 00:00:50,871 --> 00:00:52,701 Then we've got the unit of percentages. 17 00:00:52,731 --> 00:00:58,851 Percentages are generally used for values and the final result of evaluating a 18 00:00:58,851 --> 00:01:01,131 percentage is relative to the parent. 19 00:01:01,551 --> 00:01:05,301 So for example, if we set width to 50% on an element, that 20 00:01:05,301 --> 00:01:07,771 means 50% of the parents width. 21 00:01:08,301 --> 00:01:11,691 However other times, percentages can be relative to the element itself, 22 00:01:11,721 --> 00:01:16,971 for example, 50% of my own size or whatever, or in more absolute terms, 23 00:01:16,971 --> 00:01:21,471 such as for color, 25% lightness, for example, in a scale of 0 to 100. 24 00:01:21,988 --> 00:01:25,288 They're not always relative to other elements, but they're still very useful. 25 00:01:25,725 --> 00:01:30,645 The em element is defined as being the same as the point size of the font. 26 00:01:31,020 --> 00:01:35,340 So if we've got font size to be 16 pixels, then 1 em is 16 pixels. 27 00:01:35,790 --> 00:01:40,850 We can do maths with em, or we can say two em or three em and that is going 28 00:01:40,850 --> 00:01:43,100 to multiply 16 by two or by three. 29 00:01:43,665 --> 00:01:47,355 The em unit is always relative to the current font size. 30 00:01:47,595 --> 00:01:50,955 So let's say you've got a div that has a font size of 20 pixels. 31 00:01:51,285 --> 00:01:54,375 And inside it, you've got a paragraph that has a font size of 10 pixels. 32 00:01:54,765 --> 00:01:58,463 Then in the paragraph, 1em is 10 pixels and elsewhere in 33 00:01:58,463 --> 00:02:00,683 the div 1em will be 20 pixels. 34 00:02:00,713 --> 00:02:04,673 So just remember that the em unit is relative to the current font size of 35 00:02:04,673 --> 00:02:06,641 the element you're currently styling. 36 00:02:06,701 --> 00:02:10,421 So that can be a little bit confusing which is where we've got REM or rem. 37 00:02:10,471 --> 00:02:11,371 I call them rems. 38 00:02:11,431 --> 00:02:12,991 I'm sure a lot of people call them REMs. 39 00:02:13,271 --> 00:02:16,671 They stand for root em and they're generally more useful 40 00:02:16,671 --> 00:02:17,781 because they're more consistent. 41 00:02:17,831 --> 00:02:21,391 They use it the global font size to determine their size so when 42 00:02:21,391 --> 00:02:26,641 you set font size equal to 20 pixels on the HTML element, then 43 00:02:26,641 --> 00:02:28,741 that sets the REM to be 20 pixels. 44 00:02:29,131 --> 00:02:31,891 No matter what the font size of the current element is. 45 00:02:32,071 --> 00:02:33,631 The rem unit doesn't change. 46 00:02:33,811 --> 00:02:35,251 So that is pretty useful. 47 00:02:35,526 --> 00:02:39,116 We generally use rem nowadays so this is a unit that's most useful. 48 00:02:39,529 --> 00:02:42,829 We've also got viewport units, which are interesting to know about. 49 00:02:42,792 --> 00:02:45,642 I don't use them very often at all, but you're going to see them here and there. 50 00:02:45,742 --> 00:02:50,062 We've got the vh unit, which is equal to 1% of the viewport height, 51 00:02:50,062 --> 00:02:53,342 and you've got the vw unit, which is 1% of the viewport width. 52 00:02:53,706 --> 00:02:56,496 The viewport, by the way, is the currently visible area of the website. 53 00:02:56,976 --> 00:03:03,876 So if the browser window is very small, then 100vw is the width of the window. 54 00:03:03,826 --> 00:03:05,566 100 vh is the height of the window. 55 00:03:05,806 --> 00:03:08,056 And if the browser window is very big, exactly the same. 56 00:03:08,442 --> 00:03:12,852 These allow you to position things relative to the size of the browser, 57 00:03:12,852 --> 00:03:14,922 which can be useful sometimes. 58 00:03:15,402 --> 00:03:18,692 Not very useful most of the time though, but still good to know about. 59 00:03:19,242 --> 00:03:22,902 We can set values greater than 100, but obviously that's going to result in 60 00:03:22,902 --> 00:03:25,362 some horizontal or vertical scrolling. 61 00:03:25,897 --> 00:03:27,217 Alright, that's it for the units. 62 00:03:27,217 --> 00:03:31,727 We've got pixels, percentages, ems and rems and viewport units. 63 00:03:32,027 --> 00:03:33,157 They are all useful. 64 00:03:33,277 --> 00:03:36,877 Sometimes rems being probably the most useful, closely followed 65 00:03:36,877 --> 00:03:38,347 by percentages and pixels. 66 00:03:38,647 --> 00:03:42,157 But it's good to know about them just in case you see them here and there. 67 00:03:42,457 --> 00:03:45,127 Thank you for joining me in this video and I'll see you in the next one.