1 00:00:02,120 --> 00:00:03,770 Back in the project, 2 00:00:03,770 --> 00:00:06,910 I now aligned three different windows. 3 00:00:06,910 --> 00:00:11,150 Here, we have our settings in the current browser window. 4 00:00:11,150 --> 00:00:13,590 There, we have our website and to the right, 5 00:00:13,590 --> 00:00:14,913 we have our DevTools. 6 00:00:16,030 --> 00:00:21,030 To get started, we can have another look at our h2 element. 7 00:00:21,090 --> 00:00:22,740 So this element here 8 00:00:22,740 --> 00:00:25,850 with the description of the current meal. 9 00:00:25,850 --> 00:00:28,533 As you saw in one of the previous lectures, 10 00:00:30,250 --> 00:00:33,033 if I change the font size in the browser, 11 00:00:34,480 --> 00:00:38,733 the size of this h2 element increases or decreases. 12 00:00:39,970 --> 00:00:41,570 We saw that this is the case 13 00:00:41,570 --> 00:00:44,690 because no pixel value was applied. 14 00:00:44,690 --> 00:00:48,110 But if we check out the styles in here 15 00:00:48,110 --> 00:00:51,950 after selecting this element, we see that by default, 16 00:00:51,950 --> 00:00:55,580 our Chrome browser applies a certain font size 17 00:00:55,580 --> 00:00:56,683 to this element. 18 00:00:57,520 --> 00:01:01,950 Here, font size, 1.5em. 19 00:01:01,950 --> 00:01:05,400 That's this ephemeral unit we were just talking about. 20 00:01:05,400 --> 00:01:08,640 And for some reason, this unit seems to help 21 00:01:08,640 --> 00:01:12,380 to make the size of this h2 element dynamic, 22 00:01:12,380 --> 00:01:15,373 depending on the browser settings of the user. 23 00:01:16,860 --> 00:01:18,990 To understand how this em works, 24 00:01:18,990 --> 00:01:23,850 and also how the rem work, we have to go a step back though. 25 00:01:23,850 --> 00:01:26,540 We'll override this default setting now 26 00:01:26,540 --> 00:01:30,180 with a percentage value and see what's going on then. 27 00:01:30,180 --> 00:01:32,650 And afterwards, we'll go back to em and rem, 28 00:01:32,650 --> 00:01:35,310 to fully understand how these units work, 29 00:01:35,310 --> 00:01:36,993 with all of their pros and cons. 30 00:01:37,910 --> 00:01:42,560 For this, I go back into our code. 31 00:01:42,560 --> 00:01:44,720 Keep in mind, the h2 element 32 00:01:44,720 --> 00:01:47,280 is part of the food item content class. 33 00:01:47,280 --> 00:01:50,220 So you might also work on this class a bit. 34 00:01:50,220 --> 00:01:53,730 So in the code, in the stylets.css file, 35 00:01:53,730 --> 00:01:58,730 I'll go down to the food item, content selector, 36 00:01:59,110 --> 00:02:00,610 and below this one, 37 00:02:00,610 --> 00:02:03,880 I'll add the h2 selector, 38 00:02:03,880 --> 00:02:06,070 and here I'll simply add a font size 39 00:02:07,030 --> 00:02:10,863 of let's say 100% to get started. 40 00:02:12,680 --> 00:02:17,070 So with this being in place, if we go back to the code, 41 00:02:17,070 --> 00:02:20,720 you see immediately that the font size decreased, 42 00:02:20,720 --> 00:02:24,020 because now, the default h2 style, 43 00:02:24,020 --> 00:02:28,400 with the font size of 1.5em, is no longer active, 44 00:02:28,400 --> 00:02:32,360 because we defined the font size of 100% now, 45 00:02:32,360 --> 00:02:34,053 for this h2 element. 46 00:02:35,250 --> 00:02:40,250 The question now is, how big is a font size of 100% now? 47 00:02:40,440 --> 00:02:42,973 Well, in the computer tab here, 48 00:02:43,980 --> 00:02:46,040 if we scroll down, 49 00:02:46,040 --> 00:02:50,860 you see that this font size is equal to 16 pixels. 50 00:02:50,860 --> 00:02:52,640 Well, 16 pixels, 51 00:02:52,640 --> 00:02:54,760 this is a value we know about, 52 00:02:54,760 --> 00:02:57,080 because this is the default value 53 00:02:57,080 --> 00:02:59,950 that we set in the browser here, to the left. 54 00:02:59,950 --> 00:03:02,100 So these 16 pixels. 55 00:03:02,100 --> 00:03:06,400 This means if I increase this now to 18, 56 00:03:06,400 --> 00:03:09,900 you see we now have a size of 18 pixels, 20 and so on. 57 00:03:09,900 --> 00:03:14,340 So this adjusts dynamically, why is this the case? 58 00:03:14,340 --> 00:03:17,813 Well, because, as you remember back in our code, 59 00:03:18,810 --> 00:03:23,810 we only set the font size, a fixed font size for the logo, 60 00:03:25,550 --> 00:03:28,913 which is not a parent of our h2 element. 61 00:03:31,430 --> 00:03:33,040 For the nav items, 62 00:03:33,040 --> 00:03:37,283 also no parent elements of our h2 element, 63 00:03:38,870 --> 00:03:40,620 and for the h1 element. 64 00:03:40,620 --> 00:03:43,360 Well, which again is not a parent element 65 00:03:43,360 --> 00:03:46,010 of our h2 element. 66 00:03:46,010 --> 00:03:48,130 Therefore, what we simply set now, 67 00:03:48,130 --> 00:03:52,100 by adding the font size 100% property, 68 00:03:52,100 --> 00:03:56,180 means that the font size should be equal to 100% 69 00:03:56,180 --> 00:03:57,870 of the parent's font size. 70 00:03:57,870 --> 00:04:01,120 Well, and as no parent of the h2 element 71 00:04:01,120 --> 00:04:04,940 has a specific font size set, 72 00:04:04,940 --> 00:04:07,970 we just calculate the font size relative 73 00:04:07,970 --> 00:04:10,520 to the browser defaults that we have in here. 74 00:04:10,520 --> 00:04:15,070 So here, 16 pixels means 100% font size, 75 00:04:15,070 --> 00:04:18,192 results in a font size of 16 pixels. 76 00:04:19,040 --> 00:04:23,430 If I would go back to the code and change this to 200 then, 77 00:04:23,430 --> 00:04:24,773 as you can imagine, 78 00:04:25,980 --> 00:04:29,490 we have a font size of 32 pixels in here, 79 00:04:29,490 --> 00:04:32,470 now, two times the font size that is set 80 00:04:32,470 --> 00:04:36,170 as a default in the browser by the user. 81 00:04:36,170 --> 00:04:39,660 If we would apply a font size to a parent element, 82 00:04:39,660 --> 00:04:42,793 for example, the food item content class here, 83 00:04:43,840 --> 00:04:45,753 back, let's do this. 84 00:04:46,970 --> 00:04:50,027 Let's say the font size should be 24 pixels. 85 00:04:54,920 --> 00:04:57,210 With this change in place, 86 00:04:57,210 --> 00:05:01,960 by going back, now the font size of the h2 element, 87 00:05:01,960 --> 00:05:05,420 which we can select, is 48 pixels. 88 00:05:05,420 --> 00:05:08,280 Now the browser setting is overwritten 89 00:05:08,280 --> 00:05:13,030 because we set a specific font size for the parent element. 90 00:05:13,030 --> 00:05:18,030 And with that, the relative value for the percentage value 91 00:05:18,410 --> 00:05:23,410 of the h2 element is relative to this parent element size. 92 00:05:23,660 --> 00:05:25,810 So this is the percentage value, 93 00:05:25,810 --> 00:05:28,640 but what about this em value? 94 00:05:28,640 --> 00:05:32,720 Well, if we go back and change the font size, 95 00:05:32,720 --> 00:05:36,120 or maybe comment this out, to keep it here, 96 00:05:36,120 --> 00:05:40,197 to a font size of 2em, 97 00:05:41,140 --> 00:05:42,450 written like this, 98 00:05:42,450 --> 00:05:44,473 then, if we go back, 99 00:05:46,670 --> 00:05:48,410 nothing changes. 100 00:05:48,410 --> 00:05:51,570 We again have a font size of 48 pixels 101 00:05:51,570 --> 00:05:54,963 just as we calculated it for the percentage value. 102 00:05:56,340 --> 00:05:59,810 The reason for this is that for the font size property, 103 00:05:59,810 --> 00:06:03,710 and only in this font size context, that's very important. 104 00:06:03,710 --> 00:06:07,240 So if you work with em and the font size property, 105 00:06:07,240 --> 00:06:11,523 then it basically behaves equally to the percentage value. 106 00:06:12,370 --> 00:06:15,820 So it always refers to the parent elements, 107 00:06:15,820 --> 00:06:18,270 well, definition of the font size, 108 00:06:18,270 --> 00:06:21,440 and calculates the current elements font size 109 00:06:21,440 --> 00:06:23,423 relative to this element. 110 00:06:24,270 --> 00:06:28,780 So here one em would be equal to a value of 100%, 111 00:06:28,780 --> 00:06:32,020 two em would be equal to 200%, 112 00:06:32,020 --> 00:06:35,370 1.3em, 240% and so on. 113 00:06:35,370 --> 00:06:38,220 So in this strict font size context, 114 00:06:38,220 --> 00:06:40,833 these two values behave equal. 115 00:06:42,440 --> 00:06:47,000 And this equal behavior also leads to well similar problems. 116 00:06:47,000 --> 00:06:50,187 If we go back to the code and say that, 117 00:06:50,187 --> 00:06:53,077 "Hey, instead of this pixel value 118 00:06:53,077 --> 00:06:55,677 "for the food item content class, 119 00:06:55,677 --> 00:06:58,117 "we could also work with em right here. 120 00:06:58,117 --> 00:07:01,217 "And we might say we wanna have a value of 2em 121 00:07:01,217 --> 00:07:05,120 "for our food item content class." 122 00:07:05,120 --> 00:07:07,410 If you do this and go back, 123 00:07:07,410 --> 00:07:10,793 then you suddenly have a font size of 64 pixels. 124 00:07:12,150 --> 00:07:17,150 That'll be 'cause 2em relative to the browser settings, 125 00:07:17,850 --> 00:07:19,240 'cause adding it right here, 126 00:07:19,240 --> 00:07:23,430 no parent element has a specific font size property applied. 127 00:07:23,430 --> 00:07:25,760 Therefore the current user's browser settings 128 00:07:25,760 --> 00:07:27,810 are the ones that, well define, 129 00:07:27,810 --> 00:07:29,330 what the font size looks like. 130 00:07:29,330 --> 00:07:30,883 So if I increase this here, 131 00:07:32,040 --> 00:07:34,233 then we again have a big impact. 132 00:07:35,480 --> 00:07:38,080 And for the h2 element then, this of course means 133 00:07:38,080 --> 00:07:40,800 that we have an even bigger font size, 134 00:07:40,800 --> 00:07:44,560 because we take 2em, relative to the value applied 135 00:07:44,560 --> 00:07:45,690 to the parent element. 136 00:07:45,690 --> 00:07:47,660 Well, which would then basically mean, 137 00:07:47,660 --> 00:07:51,120 we have four times the size of our user settings, 138 00:07:51,120 --> 00:07:52,683 so 64 pixels here. 139 00:07:53,630 --> 00:07:56,903 If I would do the same thing with pixels, 140 00:07:56,903 --> 00:08:00,870 average percentages, so 200% right here, 141 00:08:00,870 --> 00:08:04,600 and 200% for the h2 element, 142 00:08:04,600 --> 00:08:07,410 I do this, the result is exactly the same. 143 00:08:07,410 --> 00:08:08,243 And as you see, 144 00:08:08,243 --> 00:08:12,140 this can become a bit confusing because if you might say, 145 00:08:12,140 --> 00:08:16,190 I would like to use 150% for different elements 146 00:08:16,190 --> 00:08:19,280 or 1.5em, then this doesn't work, 147 00:08:19,280 --> 00:08:20,970 because for nested elements, 148 00:08:20,970 --> 00:08:23,300 it always depends on the parent element. 149 00:08:23,300 --> 00:08:26,803 And therefore, well, font sizes can kind of explode. 150 00:08:28,550 --> 00:08:30,590 We have a third unit though here. 151 00:08:30,590 --> 00:08:33,433 That's the rem unit I was talking about. 152 00:08:34,500 --> 00:08:36,559 Let's keep things as they are. 153 00:08:36,559 --> 00:08:40,092 Let's now only change one thing, and this is, 154 00:08:42,580 --> 00:08:45,870 the font size of the h2 element. 155 00:08:45,870 --> 00:08:50,360 Here, I will now change to 200% or to 2em as we saw it, 156 00:08:50,360 --> 00:08:52,573 doesn't make a difference, to 2rem. 157 00:08:53,960 --> 00:08:56,090 Keep in mind before saving this, 158 00:08:56,090 --> 00:08:59,923 with 200%, we had a font size of 64 pixels. 159 00:09:02,300 --> 00:09:04,523 With rem being in place and saved, 160 00:09:05,890 --> 00:09:10,810 the font size now decreases to 42 pixels. 161 00:09:10,810 --> 00:09:13,470 So although our parent element here 162 00:09:13,470 --> 00:09:16,060 has a specific font size applied 163 00:09:16,060 --> 00:09:18,733 42 pixels in this case, 164 00:09:19,900 --> 00:09:23,160 this doesn't have an impact onto the h2 element. 165 00:09:23,160 --> 00:09:25,090 Because here in our styles, 166 00:09:25,090 --> 00:09:28,953 we see that the 2rem calculation is active. 167 00:09:30,200 --> 00:09:34,080 And what if I increase now the font size in the browser, 168 00:09:34,080 --> 00:09:35,753 the default font size? 169 00:09:37,170 --> 00:09:38,910 Well then this scales. 170 00:09:38,910 --> 00:09:42,530 So now we have 20 pixels in here in the browser. 171 00:09:42,530 --> 00:09:44,763 And what do we have for our h2 element? 172 00:09:46,850 --> 00:09:47,683 40 pixels. 173 00:09:48,970 --> 00:09:52,870 So this means rem, root ephemeral unit, 174 00:09:52,870 --> 00:09:54,850 means that the font size, 175 00:09:54,850 --> 00:09:58,563 is always relative to the root element's font size. 176 00:09:59,740 --> 00:10:02,830 With no default value being set for the root element, 177 00:10:02,830 --> 00:10:05,080 the size always is relative 178 00:10:05,080 --> 00:10:07,990 to the browser settings of the user, 179 00:10:07,990 --> 00:10:11,410 which gives us a very high level of flexibility. 180 00:10:11,410 --> 00:10:13,680 Let's go back to 16, maybe here. 181 00:10:13,680 --> 00:10:14,950 Because with this setting, 182 00:10:14,950 --> 00:10:17,630 the user has full control about the website 183 00:10:17,630 --> 00:10:19,800 and about different font sizes. 184 00:10:19,800 --> 00:10:24,070 And we as developer, can simply create our different fonts 185 00:10:24,070 --> 00:10:25,903 and the font sizes of these, 186 00:10:27,260 --> 00:10:30,373 always relative to this root settings. 187 00:10:31,410 --> 00:10:32,610 You don't have the problems 188 00:10:32,610 --> 00:10:35,450 that you might have with percentages or em units, 189 00:10:35,450 --> 00:10:38,270 so does relative to the parent element topic, 190 00:10:38,270 --> 00:10:39,890 which can become confusing, 191 00:10:39,890 --> 00:10:41,980 the more nested elements you have. 192 00:10:41,980 --> 00:10:45,260 But you can simply calculate with the simple rule 193 00:10:45,260 --> 00:10:49,423 of our font size being relative to the root element. 194 00:10:51,100 --> 00:10:53,740 So to quickly summarize what we learned here, 195 00:10:53,740 --> 00:10:56,230 the percentage value and the em unit, 196 00:10:56,230 --> 00:11:00,090 lead two similar results in a font size context. 197 00:11:00,090 --> 00:11:03,590 With the rem unit, we can calculate our font size, 198 00:11:03,590 --> 00:11:06,443 always relative to the root element. 199 00:11:07,570 --> 00:11:12,570 And if no specific font size is applied to the root element, 200 00:11:12,610 --> 00:11:13,960 which we could, of course do. 201 00:11:13,960 --> 00:11:16,123 So if we, for example, go back to the code, 202 00:11:17,250 --> 00:11:20,070 at the HTML element like this, 203 00:11:20,070 --> 00:11:22,610 which is something I'd definitely not recommend, 204 00:11:22,610 --> 00:11:24,460 it's just for demonstration purposes. 205 00:11:27,260 --> 00:11:30,960 30 pixels for example, if we do that, 206 00:11:30,960 --> 00:11:34,840 then our h2 element will of course also adjust to these, 207 00:11:34,840 --> 00:11:36,970 and the browser settings of the user 208 00:11:36,970 --> 00:11:39,090 are not working anymore. 209 00:11:39,090 --> 00:11:39,930 So, as I said, 210 00:11:39,930 --> 00:11:43,970 if no settings are applied to the HTML element, 211 00:11:43,970 --> 00:11:45,850 so we can delete this right here now, 212 00:11:45,850 --> 00:11:47,150 then with the rem unit, 213 00:11:47,150 --> 00:11:50,133 you have perfect control of the font size. 214 00:11:51,140 --> 00:11:54,160 By the way, if we would add the size 215 00:11:54,160 --> 00:11:58,303 to the body element here, again 30 pixels, 216 00:12:00,770 --> 00:12:04,700 then the h2 element also is not affected by this. 217 00:12:04,700 --> 00:12:07,760 So it always refers to the root element, 218 00:12:07,760 --> 00:12:11,283 so the HTML element when it comes to our rem unit. 219 00:12:12,120 --> 00:12:13,800 So with this knowledge in mind, 220 00:12:13,800 --> 00:12:18,120 the rem unit is indeed our preferred choice if applicable, 221 00:12:18,120 --> 00:12:21,190 but keep in mind as always, we have such recommendations. 222 00:12:21,190 --> 00:12:23,093 This is not the single truth. 223 00:12:23,940 --> 00:12:27,160 This is just an overview of the core features 224 00:12:27,160 --> 00:12:31,160 of these units, related to the font size property. 225 00:12:31,160 --> 00:12:34,390 But it's of course always subject to personal preferences 226 00:12:34,390 --> 00:12:38,100 and also the project requirements your individual project 227 00:12:38,100 --> 00:12:39,380 might have. 228 00:12:39,380 --> 00:12:41,280 But for the font size context, 229 00:12:41,280 --> 00:12:44,393 we'll stick to the rem unit in this project. 230 00:12:45,450 --> 00:12:48,240 I mentioned that although the percentage 231 00:12:48,240 --> 00:12:50,690 and the em unit are similar, 232 00:12:50,690 --> 00:12:53,580 when working in the font size context, 233 00:12:53,580 --> 00:12:55,610 there is a difference between these two units, 234 00:12:55,610 --> 00:12:58,430 and also between the percentage unit and the rem unit, 235 00:12:58,430 --> 00:13:01,823 when we are not working in a font size context. 236 00:13:02,880 --> 00:13:05,653 This is what we'll investigate as a next step.