1 00:00:00,870 --> 00:00:06,720 All right, so now that we've got all of our content together, we can go ahead and style all of the 2 00:00:06,720 --> 00:00:09,000 text that we've got on our website. 3 00:00:09,690 --> 00:00:15,510 So in this lesson, I'm going to cover a number of font properties so that we can further style and 4 00:00:15,510 --> 00:00:17,790 make our website look the way that we want it to. 5 00:00:18,300 --> 00:00:21,360 So the first thing I'm going to talk about is the font size. 6 00:00:21,810 --> 00:00:30,360 And to begin with, I want my H1 to be a lot bigger than my H2s and my H3s so that it really stands out 7 00:00:30,600 --> 00:00:33,390 as the title of this front page. 8 00:00:33,930 --> 00:00:37,500 So let's head over to Atom and implement that change. 9 00:00:37,800 --> 00:00:44,670 So inside my H1, I'm going to tap into the font-size property and I'm going to set the font size to 10 00:00:44,670 --> 00:00:45,960 90px. 11 00:00:46,260 --> 00:00:52,200 So this is equivalent of selecting 90 in the dropdown menu when you're selecting a font size. 12 00:00:52,650 --> 00:01:00,720 And now, if I hit refresh, then my title is going to get a lot bigger and it's going to fill most 13 00:01:00,720 --> 00:01:02,440 of that top page. 14 00:01:02,700 --> 00:01:07,950 Now, at this point, make sure that you're not zoomed in or zoomed out, and that your browser is at 15 00:01:08,010 --> 00:01:09,210 100 percent zoom. 16 00:01:09,600 --> 00:01:16,290 And you can check this by just going to zoom in or zoom zoom out and you can see whether if you're on 17 00:01:16,290 --> 00:01:18,870 100 percent or 110 percent. 18 00:01:19,710 --> 00:01:24,600 So we want it to be 100% so we can see what everybody else should see by default. 19 00:01:24,930 --> 00:01:29,520 Now, currently, our font size is set to be 90 pixels. 20 00:01:30,000 --> 00:01:38,130 So on certain browsers, if the user goes into preferences and they change their default font size for 21 00:01:38,130 --> 00:01:45,000 their web page, for example, if they need super large text in order to see, then you'll notice that 22 00:01:45,000 --> 00:01:49,890 font size does not change, even though the rest of the text does. 23 00:01:50,310 --> 00:01:58,090 And this is because this is not a dynamic size, so in order to make it dynamic, there's two options. 24 00:01:58,110 --> 00:02:01,990 So let's head back over here and go back to the medium size. 25 00:02:02,370 --> 00:02:09,360 And if we go into Atom, then instead of using pixels instead, we can use something like a percentage. 26 00:02:09,660 --> 00:02:16,170 So 100%t in terms of font size is actually a 16-pixel size. 27 00:02:17,010 --> 00:02:25,380 And so that means if we want 90 pixels, so that means 90 divided by 16, and that would be equal to 28 00:02:25,380 --> 00:02:27,660 562.5. 29 00:02:28,080 --> 00:02:36,690 Then we would need 562.5% in order to get the equivalent of 90 30 00:02:36,690 --> 00:02:37,290 pixels. 31 00:02:37,680 --> 00:02:45,090 So if we hit save and we go back to our website and I hit refresh, you'll notice that absolutely nothing 32 00:02:45,090 --> 00:02:52,110 happens because we're specifying exactly the same font size, but instead we're using a percentage this 33 00:02:52,110 --> 00:02:52,440 time. 34 00:02:52,980 --> 00:03:00,690 So that means that if we're going to say preferences and we change our font size to very small or very 35 00:03:00,690 --> 00:03:04,110 large, then that font size will scale with it. 36 00:03:04,350 --> 00:03:10,530 Now, the other way of specifying a dynamic font size is by using a unit called the em. 37 00:03:10,890 --> 00:03:17,220 For example, if we head back on to our favorite website, techcrunch.com and we highlight this 38 00:03:17,220 --> 00:03:19,140 title here and we inspect it, 39 00:03:19,560 --> 00:03:26,160 then if you select this H2 here, you'll see that it's got the class called live title and its font 40 00:03:26,160 --> 00:03:32,460 size is specified as 2em rather than however many pixels they want it to be. 41 00:03:32,910 --> 00:03:42,510 Now we've seen em before inside our HTML and we used it as a tag in order to emphasize a particular 42 00:03:42,510 --> 00:03:48,030 section of text, and that stylistically means that you'll make something italicized. 43 00:03:48,480 --> 00:03:56,670 Now, in this case, this is actually a completely different em, and the em in this case is actually 44 00:03:56,670 --> 00:04:00,480 the phonetic pronunciation of the letter M. 45 00:04:00,780 --> 00:04:10,170 And the reason is because in typesetting in the olden days that em or the M rather is the width of 46 00:04:10,170 --> 00:04:12,030 the capital letter M. 47 00:04:12,180 --> 00:04:19,770 And so that means that when you say 1em, then you want the font size to be one times the width of 48 00:04:19,890 --> 00:04:21,270 the capital letter M. 49 00:04:21,660 --> 00:04:26,220 And if you want 2, then that's double the size of the M, et cetera, et cetera. 50 00:04:26,520 --> 00:04:29,040 Now, in modern days, this is no longer true. 51 00:04:29,160 --> 00:04:36,050 But what is true is that 1em is 16 pixels, as we've seen with our percentages. 52 00:04:36,060 --> 00:04:43,590 So 16 pixels = 100% when you're talking about fonts and it's equal to 1em or 1 53 00:04:43,590 --> 00:04:44,040 em. 54 00:04:44,700 --> 00:04:51,270 And that means that you can achieve whatever size you want dynamically using either of these methods. 55 00:04:51,750 --> 00:04:59,180 So for example, as we calculated before, 90 pixels is equal to 5.625em. 56 00:04:59,370 --> 00:04:59,820 And so 57 00:04:59,940 --> 00:05:08,680 that means that if we replace our font size with that number and we hit save and we go back to our site 58 00:05:08,680 --> 00:05:13,870 and we hit refresh, then you'll see again, the font size does not change because they are all the 59 00:05:13,870 --> 00:05:14,310 same. 60 00:05:14,320 --> 00:05:19,090 It's just using different ways of specifying the same size. 61 00:05:19,780 --> 00:05:24,050 So then the question you might have is why would you use one over the other? 62 00:05:24,070 --> 00:05:25,120 What does it matter? 63 00:05:25,720 --> 00:05:32,200 And if you look on different websites, for example, take uber.com and you know, if we inspect 64 00:05:32,200 --> 00:05:39,070 on their title here, then you'll notice that their font size is specified in pixels, whereas on TechCrunc 65 00:05:39,070 --> 00:05:44,020 it's specified in ems, and on other sites you might get percentages. 66 00:05:44,320 --> 00:05:49,750 Now, as we mentioned before, if we change the font size, for example, say somebody with accessibility 67 00:05:49,750 --> 00:05:56,800 issues to very large, then these static sized fonts do not change because it stays exactly the same 68 00:05:56,800 --> 00:05:57,160 size. 69 00:05:57,610 --> 00:06:02,590 Whereas the things that are dynamically sized, for example, things using em or percentages, they 70 00:06:02,590 --> 00:06:09,070 do scale up so that users who have maybe visual impairments, et cetera, who might want to have a higher 71 00:06:09,070 --> 00:06:12,430 font setting will be able to view the website more comfortably. 72 00:06:12,670 --> 00:06:17,470 And that's quite important in terms of making your website accessible to everybody. 73 00:06:17,890 --> 00:06:22,810 Now, the argument against that is some web designers say that people with visual impairment these days 74 00:06:22,840 --> 00:06:29,140 are more likely to zoom in rather than changing their default font size, and they're more likely to 75 00:06:29,140 --> 00:06:33,010 have a higher zoom in order to read all the text on page. 76 00:06:33,370 --> 00:06:40,540 And with zoom, it doesn't actually matter whether if your text is statically or dynamically sized because 77 00:06:40,570 --> 00:06:45,790 it will just scale up the website depending on what you're asking it to do. 78 00:06:46,210 --> 00:06:52,000 So maybe that's not such an important distinction between statically and dynamically sized fonts any 79 00:06:52,000 --> 00:06:52,420 more. 80 00:06:52,720 --> 00:06:58,150 But there is one thing that is really important, and that's the fact that when you're using em 81 00:06:58,150 --> 00:07:02,320 or when you're using percentages, that value is inherited. 82 00:07:02,680 --> 00:07:10,390 So if I go into the body here and I specify a font size for everything inside the body, so that's everything 83 00:07:10,390 --> 00:07:13,120 on my website to be say 2em, 84 00:07:14,080 --> 00:07:19,600 and then in my H1, I leave my font size as the previous dynamic size. 85 00:07:19,960 --> 00:07:24,640 I hit Save, and let's head back to our website and we refresh, 86 00:07:24,970 --> 00:07:30,070 then you'll notice that our H1 has now become absolutely gigantic. 87 00:07:30,400 --> 00:07:39,340 And that's because the font size gets inherited and added on top of whatever it got from its parent. 88 00:07:39,670 --> 00:07:47,410 So the parent of the H1 is the body here because it's contained inside the body. And in the body 89 00:07:47,410 --> 00:07:52,000 we said that font size should be 2em across the entire body of the website. 90 00:07:52,360 --> 00:07:56,260 Now, when it gets to the h1, it's already got that 2em applied. 91 00:07:56,380 --> 00:08:04,330 And then it adds that 5.625 on top of the 2em which is why we end up with something so gigantic. 92 00:08:04,600 --> 00:08:07,140 And this is exactly the same with percentages. 93 00:08:07,150 --> 00:08:16,990 So if I said, say, 200% in our font size and I change this to 562.5%, 94 00:08:17,170 --> 00:08:24,760 then again, we still get this gigantic font size. But say, if I said, you know, the font size should 95 00:08:24,760 --> 00:08:29,650 be 20 pixels and over here, it should be 90 pixels 96 00:08:29,650 --> 00:08:32,790 and we go over here, we head back, and we refresh, 97 00:08:32,800 --> 00:08:37,090 then you see that that font size is staying as 90 pixels. 98 00:08:37,390 --> 00:08:44,650 It does not matter what its parent's font size was because these are static sizes. So that means it 99 00:08:44,650 --> 00:08:46,330 can get a little bit dangerous. 100 00:08:46,690 --> 00:08:54,010 For example, if you wanted all the text inside your body to be 200%, which remember is 2 101 00:08:54,010 --> 00:09:03,220 times 16 pixels, which is 32 pixels, now that works fine until you get to a point and you forgot that 102 00:09:03,220 --> 00:09:03,940 you did that 103 00:09:04,270 --> 00:09:11,290 and over here, you ended up setting your 5.625% 104 00:09:11,590 --> 00:09:14,230 and then all of a sudden, Oh, what? 105 00:09:14,230 --> 00:09:15,010 What's going on? 106 00:09:15,010 --> 00:09:16,530 Why does it look like this? 107 00:09:16,540 --> 00:09:21,400 And you have to go and debug and try and figure out, where did it get this font size from? 108 00:09:21,430 --> 00:09:26,740 So, for example, we can inspect in our Chrome developer tools and you see, OK, so it's got font 109 00:09:26,740 --> 00:09:29,110 size 5.625, that's what I want. 110 00:09:29,500 --> 00:09:36,340 But do I have any font sizes anywhere else and here in the body, even though it's crossed out, that 111 00:09:36,340 --> 00:09:38,230 200% is still being applied? 112 00:09:38,740 --> 00:09:45,250 So in order to avoid this, one of the things that we got in the latest version of CSS, which is the 113 00:09:45,250 --> 00:09:51,730 version that we're using currently or the version I'm teaching you about, is CSS 3 and inside CSS 114 00:09:51,730 --> 00:09:52,210 3 115 00:09:52,210 --> 00:09:59,710 there is something called the rem and that refers to the root em. So that 116 00:09:59,770 --> 00:10:08,870 means ignore all of the parent settings for the font size and just set it to this relative to the root. 117 00:10:09,250 --> 00:10:15,220 So that means that it doesn't matter what we've done here or in its enclosing containers or parents. 118 00:10:15,580 --> 00:10:21,850 It will be 5.625 times 16 pixels as long as we add the 'r' in front of the em. 119 00:10:22,660 --> 00:10:28,210 So if we hit save and we head back over to our website hit refresh, then you can see that we still 120 00:10:28,210 --> 00:10:34,090 get that size that we wanted, which is the 5.625rem. 121 00:10:34,330 --> 00:10:43,120 So the beauty of the root em is that it does not get affected by upstream size changes, and it means 122 00:10:43,120 --> 00:10:47,560 that it's easier to debug and it's less likely that something will go wrong. 123 00:10:48,010 --> 00:10:57,160 So when sizing text, my personal recommendation to you is to use rem instead of em or percentages 124 00:10:57,160 --> 00:11:05,020 or pixels, because that is the most adaptable and also the most reliable and least error-prone. 125 00:11:05,710 --> 00:11:13,000 So now if we head back over to our site and refresh and also change our font size in our preferences 126 00:11:13,000 --> 00:11:15,490 back to the medium that's recommended, 127 00:11:15,940 --> 00:11:22,570 then you can see that we've got the exact size that we were looking for, which is the same as the 90 128 00:11:22,570 --> 00:11:24,400 pixels that we specified 129 00:11:24,760 --> 00:11:28,960 but this is done using rem rather than em or percentages. 130 00:11:29,380 --> 00:11:30,850 Now here's a challenge for you. 131 00:11:31,210 --> 00:11:38,380 We want to change the size of this part which says 'a programmer.' Now at the moment, 'a programmer' is 132 00:11:38,380 --> 00:11:40,180 inside a paragraph tag. 133 00:11:40,510 --> 00:11:45,550 Now we've got several other paragraph tags on this page, so we don't want to change the size of all 134 00:11:45,550 --> 00:11:45,880 of them. 135 00:11:46,330 --> 00:11:53,950 So first, I want you to change this element from the paragraph element into an h2 element, and 136 00:11:53,950 --> 00:12:02,290 I want you as a challenge to set the font size of the h2 to be equivalent to 40px, 137 00:12:02,590 --> 00:12:05,110 but I want you to do that using rem. 138 00:12:05,890 --> 00:12:09,500 So pause the video, go ahead and see if you can figure it out. 139 00:12:09,730 --> 00:12:11,650 So that's pretty easy to calculate. 140 00:12:11,920 --> 00:12:21,520 So our target is 40px for the font size, and we know that 1em is 16px so we can simply 141 00:12:21,520 --> 00:12:26,500 divide 40 by 16 and we end up with 2.5. 142 00:12:26,590 --> 00:12:29,630 So it'll be 2.5rem 143 00:12:29,800 --> 00:12:36,640 in order to achieve the equivalent of 40 pixels for the font size of our h2. So let's go over to Atom 144 00:12:36,640 --> 00:12:37,780 and implement that. 145 00:12:38,110 --> 00:12:43,390 So inside our H2, let's go ahead and set the font size to 2.5rem, 146 00:12:44,890 --> 00:12:47,080 hit, save and refresh. 147 00:12:47,080 --> 00:12:54,160 And voila, we've now got a much larger subtitle and heading by changing the font size. 148 00:12:54,610 --> 00:13:00,370 So if that was confusing at all, make sure that you rewind and rewatch some of the parts when we spoke about 149 00:13:00,370 --> 00:13:03,280 dynamic font sizing and how it all worked. 150 00:13:03,430 --> 00:13:07,970 But now there's just one thing that I want to change about the layout of this website. 151 00:13:07,990 --> 00:13:13,690 I would love for this h1 to have a little bit more padding from the top so that it gets pushed 152 00:13:13,690 --> 00:13:16,270 down more towards the center of the page. 153 00:13:16,540 --> 00:13:23,650 So we can do that by simply adding a 50px margin to the top of our h1 rather than having it as 154 00:13:23,650 --> 00:13:24,610 0 pixels. 155 00:13:24,760 --> 00:13:29,650 So let's go into Atom and change the margin-top to 50 pixels. 156 00:13:29,950 --> 00:13:36,610 This is what we end up with. Now with margin-top and padding and all of those other things where we 157 00:13:36,610 --> 00:13:37,750 specify a size, 158 00:13:38,050 --> 00:13:42,700 you can also use the em, the rem or the percentage values. 159 00:13:42,910 --> 00:13:49,000 But in this case, I actually prefer to stick to using pixels because it's more precise and it's much 160 00:13:49,000 --> 00:13:54,430 easier to see what's going on when you inspect it in using the box model. 161 00:13:54,790 --> 00:13:58,930 So that's just a personal preference and it's a stylistic choice of your own. 162 00:13:59,260 --> 00:14:06,550 So if you want to use rem or em or percentages, that's absolutely fine as well. 163 00:14:06,550 --> 00:14:11,710 And it works exactly the same way, as we mentioned with the font sizing. 164 00:14:11,890 --> 00:14:18,100 So basically, as long as you insert a 50px l equivalent margin, then we should end up with something 165 00:14:18,100 --> 00:14:19,510 that looks a little bit like this. 166 00:14:19,750 --> 00:14:25,780 Now there's one more thing that I would like to change here after we've specified our font sizes, and that's 167 00:14:25,780 --> 00:14:30,280 to have a little bit less space between the H1 and the H2 here. 168 00:14:30,280 --> 00:14:38,020 Because at the moment, if I hit Inspect, you can see that the H1 has a significant amount of margin 169 00:14:38,800 --> 00:14:44,220 before and after, and I would just like to get rid of that bottom margin. 170 00:14:44,320 --> 00:14:52,780 So instead of specifying the margin-top, we can just specify a margin using the circle shorthand. 171 00:14:52,810 --> 00:14:56,740 So we start off with the top, which is going to have 50px margin, 172 00:14:57,160 --> 00:14:59,530 then we go to the right, which I'm going to keep as 173 00:14:59,820 --> 00:15:01,410 auto, to keep it centered. 174 00:15:01,710 --> 00:15:04,170 Then we get to the bottom, which I want to be zero. 175 00:15:04,590 --> 00:15:08,430 And finally, we have the left, which I'm going to leave as auto as well. 176 00:15:08,970 --> 00:15:15,960 Now if we hit save and we head back and closed down our Chrome developer tools and now we hit refresh, 177 00:15:16,230 --> 00:15:21,120 you can see that we've got a little bit less space between the H1 and the H2, and it just looks a little 178 00:15:21,120 --> 00:15:22,380 bit more put together. 179 00:15:22,410 --> 00:15:27,000 Now these are all minor tweaks, and it's totally up to you if you want to implement them or not. 180 00:15:27,240 --> 00:15:30,910 I'm just adjusting it to my eye. Now in the next lesson 181 00:15:30,930 --> 00:15:38,490 I've got a number of challenges for you, and I want you to use the developer docs on MDN or on w3 182 00:15:38,490 --> 00:15:42,240 schools in order to figure out what these properties are and how you should set them. 183 00:15:42,570 --> 00:15:48,480 But you should be fully equipped in order to discover some of these other fonts related properties that 184 00:15:48,480 --> 00:15:49,350 I want to talk about. 185 00:15:49,500 --> 00:15:52,670 So head over to the next lesson and complete the challenge.