WEBVTT 0 00:00.290 --> 00:05.510 Now, in this lesson, we're going to talk a bit more about the different CSS properties that we can 1 00:05.510 --> 00:11.060 set for fonts so we can change the appearance of the text in our websites. 2 00:11.630 --> 00:18.050 And we've already seen some of them, for example, the color property which sets the text color, but 3 00:18.050 --> 00:25.820 there's other ones as well, such as the font-weight, the font-size and also the font- family, which 4 00:25.820 --> 00:28.140 is the typeface that we want to use. 5 00:28.160 --> 00:30.680 Let's explore some of these newer ones. 6 00:30.710 --> 00:33.910 The first one I'll talk about is the "font- size". 7 00:33.920 --> 00:42.320 We can change the size of a font by simply using the font-size property and then setting it to a particular 8 00:42.320 --> 00:45.890 pixel(px) size, as you might have seen me do already. 9 00:46.280 --> 00:51.350 But if we think about it, what exactly does a 20px font size mean? 10 00:51.350 --> 00:53.110 How big is it really? 11 00:53.120 --> 00:55.040 Well, this is how big it is, 12 00:55.040 --> 01:00.750 1px is about 1/96th of an inch. 13 01:00.750 --> 01:07.560 And the reason why we're using imperial units is because a lot of the sizing for websites and for design 14 01:07.560 --> 01:12.330 work, actually comes from the olden days of book printing, book binding 15 01:12.330 --> 01:14.010 and it was very traditional. 16 01:14.010 --> 01:20.220 If you know how big an inch is, then you know how big 1/96th of an inch is, 17 01:20.220 --> 01:26.640 it's absolutely tiny, but if you have no idea how big an inch is, then in metric units it's about 18 01:26.670 --> 01:29.550 0.26mm. 19 01:29.550 --> 01:32.310 That's about how big a pixel is. 20 01:32.310 --> 01:39.150 It's 0.26mm wide and 0.26mm tall. 21 01:39.150 --> 01:43.620 So it's a small cube that's very, very tiny. 22 01:44.500 --> 01:50.800 There are other ways that we can represent the font size when we're writing CSS. 23 01:50.920 --> 01:58.090 One common way that you'll see in addition to pixels is using something called a point. 24 01:58.540 --> 02:06.010 A "px" stands for a pixel and a "pt" stands for a point. 25 02:06.100 --> 02:07.950 Now how big is a point? 26 02:07.960 --> 02:10.630 Well, it's a slightly bigger than a pixel, 27 02:10.630 --> 02:15.070 it's about 1/72nd of an inch. 28 02:15.070 --> 02:17.320 So that's just slightly bigger. 29 02:17.350 --> 02:30.880 If 1/96 of an inch is 0.26mm, 1/72 of an inch is about 0.35mm, just a tiny bit bigger. 30 02:30.940 --> 02:36.220 Now the point is actually often used in many different applications. 31 02:36.220 --> 02:45.350 So when you select a 12-size font in, say Word, you're actually selecting 12 points. 32 02:45.350 --> 02:50.930 So that means when you're using 12 points on your web page, you can expect that when a website is at 33 02:50.930 --> 02:56.000 100%, it will look about the same as a 12 font on your word document. 34 02:56.090 --> 03:04.040 In addition, there are some other ways of representing font-size, the "em" and the "rem". 35 03:04.160 --> 03:06.140 What are these units? 36 03:06.170 --> 03:13.520 Well, the em is actually not pronounced em, it's pronounced "m", so it's pronounced in the same way that 37 03:13.520 --> 03:16.100 this letter is in the alphabet. 38 03:16.370 --> 03:17.660 Why is that? 39 03:17.660 --> 03:24.170 Well, 1em is defined as the full width of an m. 40 03:24.260 --> 03:32.150 The letter m is probably one of the widest letters in the English alphabet, and this unit simply represents 41 03:32.150 --> 03:33.950 that entire width. 42 03:34.430 --> 03:37.700 But what does it actually mean when we use it? 43 03:37.730 --> 03:46.850 Well, what it means is that when you set an h1 to have the font-size of 1em, your CSS code would 44 03:46.850 --> 03:48.570 look something like this. 45 03:48.590 --> 03:58.910 Then it means that if it had a parent, for example, if we had a body tag that enclosed this h1 46 03:58.910 --> 04:13.100 tag, then if this body had a font-size of say 20px, then this h1 if we set it to 1em or 47 04:13.100 --> 04:19.120 1em, then it means it's going to be a 100% of the parent size. 48 04:19.130 --> 04:21.830 So it means it's going to be 20px. 49 04:22.070 --> 04:31.760 Now, however, if we set it to 2em instead, then in this case it's going to be two times the parent 50 04:31.760 --> 04:32.450 size. 51 04:32.450 --> 04:37.940 So 2*20px, which is going to be 40px instead. 52 04:38.030 --> 04:41.090 It's basically a relative size. 53 04:41.450 --> 04:45.260 And I'm going to explain to you why this is important very shortly. 54 04:45.260 --> 04:52.730 But closely related to the em or the em is the rem, and it's got that extra word, "r". 55 04:52.760 --> 04:55.670 And basically it works the same thing. 56 04:55.670 --> 05:00.860 It's a relative size, but it's now relative, instead of to the parent, 57 05:00.860 --> 05:08.840 it's relative to the root of your HTML file, which if you remember, the root is usually an html element 58 05:08.840 --> 05:11.750 that encloses everything inside. 59 05:12.770 --> 05:17.840 What is the difference then, between the em and the rem? 60 05:18.170 --> 05:26.930 If we take a look at this code where we've got a body tag that encloses an h1 and then we've got a footer 61 05:26.930 --> 05:33.950 tag, which is one of the tags that you can use to define a section in your code for the footer area 62 05:33.950 --> 05:34.940 of your website, 63 05:35.030 --> 05:39.680 then inside here we've got an h2 that's enclosed. 64 05:40.220 --> 05:52.250 If I set my h2 to have a font size of 2em and my footer had a font size of 20px, then 65 05:52.280 --> 05:57.860 2em is 2*20px, which is equal to 40px. 66 05:57.860 --> 06:00.860 So this h2 is now 40px. 67 06:01.310 --> 06:08.810 However, if I go in here and I change this footer to have 80px, then all of a sudden this is 68 06:08.810 --> 06:16.760 going to change and it's no longer going to be 40px, but instead, it's going to be 2*80, 69 06:16.790 --> 06:20.840 which is now equal to 160px. 70 06:20.840 --> 06:25.310 So it's moving relative to its parent size. 71 06:25.610 --> 06:37.100 On the other hand, if I had set this h2 to have a size of 2rem and I change the size of my footer 72 06:37.100 --> 06:43.760 from 20px to 80px, then it does not affect this 73 06:43.820 --> 06:44.510 whatsoever, 74 06:44.510 --> 06:47.200 it still remains the same size. 75 06:47.210 --> 06:55.340 It's only if I change the root element, which if you take a look, it's the thing that encloses all 76 06:55.340 --> 06:59.440 of the rest of the code, which is normally the html element. 77 06:59.450 --> 07:07.580 If I change this size to something larger, say 90px, then that is the thing that will affect 78 07:07.580 --> 07:09.170 this sizing. 79 07:09.170 --> 07:19.100 So the main difference between the rem and the em is the fact that this is a more consistent way of changing 80 07:19.100 --> 07:20.210 the sizing. 81 07:20.210 --> 07:27.230 So I normally recommend that everybody who develops websites, when you're setting the font size, to use 82 07:27.230 --> 07:32.960 the rem. Because the way that you have different things embedded in others, 83 07:32.960 --> 07:39.170 so this h2 is inside a footer which is inside the body, which is inside the html, 84 07:39.200 --> 07:46.100 then the relationship to the parent can very quickly get very confusing and you don't know whose parent 85 07:46.100 --> 07:49.730 you're referring to, especially when you're working in a separate CSS file. 86 07:49.820 --> 07:53.300 So understand how the rem works, 87 07:53.300 --> 07:58.670 remember, it is a scaled size of the root, 88 07:58.910 --> 08:03.980 1rem is 1x the root size, 2rem is 2x the root size, 89 08:03.980 --> 08:09.770 and this is a much easier way to control the different sizes of various elements on your screen and to 90 08:09.770 --> 08:15.440 have more clarity around what's going on. In the starting file that you downloaded previously, 91 08:15.440 --> 08:17.750 I've got some sample code for you. 92 08:17.780 --> 08:25.040 If we take a look at all the different ways of setting font-size, you can see that we can use the pixel 93 08:25.040 --> 08:33.080 size, we can use point size, we can use em, rem and we can also use named font sizes such as 94 08:33.080 --> 08:34.970 x-large or large 95 08:34.970 --> 08:40.160 and when all of this is rendered, you'll see the different sizes in play. 96 08:40.190 --> 08:48.780 The fact that a pixel is much smaller than a point, but these two are static font sizes and then the 97 08:48.780 --> 08:53.490 em is relative to the parent and the rem is relative to the root, 98 08:53.490 --> 08:55.920 but these are relative sizes. 99 08:56.160 --> 09:02.190 If you want to see this code and be able to edit it and change it and see it working, then download 100 09:02.190 --> 09:07.200 the zipped file from this current lesson called "6.1 Font Properties." 101 09:07.590 --> 09:10.710 Once you've extracted it, open it up inside VS Code. 102 09:10.710 --> 09:17.130 Head over to font-size.html and you'll see exactly the same code as in the demo, 103 09:17.130 --> 09:20.190 but in this case it's of course in VS Code. 104 09:20.190 --> 09:26.820 So you can change things such as the rem, the em, the different font sizes, the root font size, and 105 09:26.820 --> 09:29.280 you'll see it reflected on the screen. 106 09:29.400 --> 09:36.360 For example, if I change this root font-size from xx-large down to say, 20px, then 107 09:36.390 --> 09:44.790 you'll see that this paragraph change accordingly because its size is based on rem. 108 09:44.790 --> 09:48.960 So have a play around with that so that you can understand what's going on. 109 09:49.710 --> 09:53.940 There are some other font properties that I want to briefly cover. 110 09:53.940 --> 09:57.840 One is the "font-weight", which is relatively simple. 111 09:57.840 --> 10:01.710 You can have normal or you can have bold, and we all know what that means, 112 10:01.710 --> 10:04.050 it just makes the font look a bit heavier. 113 10:04.290 --> 10:09.210 But out in the wild you might see some other ways that people use to change the font-weight 114 10:09.210 --> 10:16.230 in addition to the basic keywords. You can have a relative font-weight which is relative to the parent 115 10:16.230 --> 10:19.320 to have the font lighter or have it be bolder. 116 10:19.320 --> 10:29.520 In addition, you can also use a number from 100 up to 900 to determine how light or how bold you want 117 10:29.520 --> 10:30.690 the font to be. 118 10:30.690 --> 10:37.710 And similarly, when we say lighter, it basically minuses the number by 100 119 10:37.710 --> 10:41.370 and if we say bolder, it just makes it bolder by 100, 120 10:41.370 --> 10:49.560 somewhere along this range. In addition to font-size and font-weight, there's also the all important 121 10:49.560 --> 10:50.880 "font-family", 122 10:50.880 --> 10:55.380 and this determines what you want your text to look like. 123 10:55.410 --> 11:01.320 For example, in this first example, we've got the font-family that is set to Helvetica. 124 11:01.350 --> 11:10.260 This is a particular typeface and the name is called Helvetica, but this is a Mac-specific typeface. 125 11:10.260 --> 11:15.360 So there are many Windows computers that do not own this typeface. 126 11:15.480 --> 11:23.400 That's why very often when we write a font-family, we don't just write the font name, we have a comma, 127 11:23.520 --> 11:28.350 and then we have a backup generic font type. 128 11:28.830 --> 11:31.920 So in this case it's a sans-serif. 129 11:32.310 --> 11:38.550 A sans-serif is simply the type of font where all the edges are pretty much at right angles. 130 11:38.550 --> 11:43.230 If you had these little feet or these little decorations at the edges 131 11:43.340 --> 11:48.790 of your letters, then very often what you're looking at is a serif-type font. 132 11:48.820 --> 11:52.450 So that's the main two types of different typefaces. 133 11:52.450 --> 11:54.370 And in later lessons, we 134 11:54.400 --> 11:56.620 cover typefaces in more detail. 135 11:56.620 --> 12:01.000 So you can either search for that lesson or wait until it comes up to learn more about that. 136 12:01.570 --> 12:05.750 What is important though, is having this generic typeface. 137 12:05.770 --> 12:13.180 This means that when you have this set that Mac users will see this font, but Windows users will see 138 12:13.180 --> 12:18.610 something that's relatively equivalent and it will be automatically displayed for them when it doesn't 139 12:18.610 --> 12:19.330 work. 140 12:20.020 --> 12:23.860 Now what if you have a font that has many words in it? 141 12:23.860 --> 12:27.550 For example, "Times New Roman" consists of three words. 142 12:27.580 --> 12:32.450 Well, in this case, we can't simply just type it out like this and then have a comma. 143 12:32.470 --> 12:38.890 We actually need the quotation marks around it so that we can tell the CSS file that there are spaces 144 12:38.890 --> 12:41.050 in the name of the font- family. 145 12:41.050 --> 12:43.850 So just be careful about that when you're using it. 146 12:44.180 --> 12:52.220 And because "Times New Roman" is a serif-type font, then the backup, the generic type is also a serif. 147 12:52.730 --> 12:59.120 Now what if you want a completely custom font that maybe the user doesn't have? 148 12:59.150 --> 13:05.390 Well, one of the best places to find free fonts is going over to fonts.google.com. 149 13:05.570 --> 13:12.050 And here you can find all sorts of different fonts and there are so, so many for you to choose from 150 13:12.050 --> 13:14.570 and you can browse to your heart's content. 151 13:14.720 --> 13:16.550 Now I want you to do this with me, 152 13:16.580 --> 13:20.480 go over to fonts.google.com, find a font that you like. 153 13:20.510 --> 13:27.710 So maybe I really like a particular font and if you click on it, sometimes you'll see that it has different 154 13:27.710 --> 13:31.100 font faces for the different weights. 155 13:31.100 --> 13:34.850 So there's bold, which is 700 or regular at 400. 156 13:34.850 --> 13:40.700 But then other fonts you might see in here doesn't actually have any weight other than just the regular 157 13:40.700 --> 13:45.240 one that you can use. Depending on which of these type you have, 158 13:45.260 --> 13:48.740 simply select the weight that you're interested in. 159 13:48.740 --> 13:57.800 For example, with this font, maybe I want the medium size, and with this font, maybe I'm just going 160 13:57.800 --> 13:59.420 to select a regular one. 161 13:59.540 --> 14:04.940 And once you've selected that, if you go to the top right corner, you can see all of your selections. 162 14:04.940 --> 14:09.470 So you can remove all or you can remove the ones that you're not interested in, 163 14:09.470 --> 14:13.480 but either way, you should end up with a font that you want to include. 164 14:13.490 --> 14:19.520 Now make sure that that "<link>" is selected and then copy that over to your starting file. 165 14:19.520 --> 14:26.450 So select the font-family.html inside the head element just after the style tag, 166 14:26.450 --> 14:33.680 go ahead and paste all of that in and this is basically a link that is going to pull in the Google font 167 14:33.680 --> 14:35.870 for any user on the internet. 168 14:35.870 --> 14:41.330 So it doesn't matter if they have a Mac or a PC or which fonts they have downloaded on their computer, 169 14:41.360 --> 14:45.680 they'll all be able to access this font because we're including it in the link. 170 14:45.680 --> 14:51.680 And then let's go ahead and copy the CSS rule, which Google has very helpfully included for us. 171 14:51.680 --> 14:57.980 And if you scroll up, you'll see that I've again got an internal style set in here so that we can more 172 14:57.980 --> 15:01.760 easily see the CSS alongside the HTML on the same file 173 15:01.760 --> 15:03.530 while we're doing the exercise. 174 15:03.530 --> 15:11.210 Let's go ahead and create an h1 here and I'm simply going to write the words font-family because that 175 15:11.210 --> 15:13.160 is what this page is all about. 176 15:13.160 --> 15:16.430 And then let's right-click and show it in the preview. 177 15:16.520 --> 15:23.070 Now, I want you to set the h1 CSS style to the one that you just copied over. 178 15:23.090 --> 15:26.120 Pause the video and do that right now. 179 15:27.990 --> 15:28.320 All right. 180 15:28.320 --> 15:34.710 So we need to target the h1 of which we've only got one so we can use the element selector and 181 15:34.710 --> 15:38.490 then we paste in our CSS style as easy as that. 182 15:38.490 --> 15:45.510 And you'll notice immediately that updates that font into our custom font from Google, 183 15:45.510 --> 15:50.790 and it doesn't matter what you've chosen, this should always work as long as you've included all of 184 15:50.790 --> 15:55.770 the links that are required and added in the relevant CSS. 185 15:56.040 --> 16:02.730 Also on this page you'll see the different font families, for example, the Helvetica and the 186 16:02.730 --> 16:03.390 sans-serif 187 16:03.390 --> 16:05.700 or on a Windows, 188 16:05.700 --> 16:09.000 the default sans-serif will be an Arial-type font. 189 16:09.000 --> 16:14.940 And then you've got serif-type fonts, which are the ones with the little feet that I mentioned. 190 16:14.970 --> 16:22.230 You've got these sans-serif fonts and you've got all of these other generics such as cursive, monospace, 191 16:22.230 --> 16:25.830 and fantasy. Cursive is a little bit curly. 192 16:25.830 --> 16:26.970 That's how I remember it. 193 16:27.000 --> 16:34.600 Monospace has all the letters occupying the same width, so similar to a typewriter or code, and fantasy 194 16:34.600 --> 16:36.250 is usually something kind of wild. 195 16:36.250 --> 16:41.740 And these generic fonts will be different depending on the computer that you use and the browser that 196 16:41.740 --> 16:42.190 you use. 197 16:42.190 --> 16:49.240 So you might not see the same type of fonts that I have here, but if you specify a specific font and 198 16:49.240 --> 16:55.300 you make sure that it's linked to, then we should all be looking at the same font face right up here. 199 16:55.780 --> 17:04.420 And notice how when we copy that over it specified the specific font, but also a backup font in case 200 17:04.420 --> 17:09.640 these links didn't work or something messed up and it would default to a cursive font. 201 17:09.820 --> 17:13.480 The generic cursive font would then look like this. 202 17:14.200 --> 17:21.070 So the final thing I want to talk about in terms of text styling is alignment. 203 17:21.070 --> 17:22.720 So text alignment. 204 17:22.720 --> 17:30.120 And there is this property called "text-align" where you can set it to say, centered, or you can set it to 205 17:30.120 --> 17:32.580 the left or to the right. 206 17:32.580 --> 17:36.810 And you've also got some values like start and end. 207 17:36.810 --> 17:43.500 And basically start is when you have text that maybe starts, writing from the right to left, such as 208 17:43.500 --> 17:44.520 in Arabic, 209 17:44.520 --> 17:49.680 and so in this case, the start is actually here and the end is here. 210 17:49.680 --> 17:56.220 But then if you're working with Western text, then the start will be right here and the end will be 211 17:56.220 --> 17:57.000 right here. 212 17:57.120 --> 18:01.800 That's just a more flexible way of determining the text- align. 213 18:01.800 --> 18:10.410 But all in all, this is a pretty simple property and you can take a look at it in the MDN Docs to learn 214 18:10.410 --> 18:18.780 more about what the other values in addition to start/end are, and try the demo to see how they work. 215 18:19.200 --> 18:27.180 Now once you've done all of that, I've got a final exercise for you and that's located in the index.html 216 18:27.210 --> 18:27.690 here. 217 18:27.930 --> 18:36.160 There's a number of TODOs I want you to complete, and I want you to go through them one by one. 218 18:36.160 --> 18:43.000 It involves changing some colors, changing some font sizes, font-weight, font-family, the 219 18:43.000 --> 18:48.070 text-align and also changing a root element font-size. 220 18:48.580 --> 18:54.400 The important thing is that you don't change any of the CSS that's already included, but instead write 221 18:54.400 --> 19:01.750 your CSS below in this internal style element so that you can quickly refer to the TODOs and see what 222 19:01.750 --> 19:03.760 you need to write in the CSS. 223 19:03.790 --> 19:06.700 Don't worry too much about setting external CSS. 224 19:06.730 --> 19:10.330 We're just completing this as a quick exercise. 225 19:10.600 --> 19:15.190 And remember, while you're doing this, if you want to see what the end result should look like, go 226 19:15.190 --> 19:17.110 ahead into the goal.png 227 19:17.410 --> 19:22.000 to see all the colors and layout and relative sizes of everything. 228 19:22.030 --> 19:25.570 Pause the video now and go through each of these TODOs. 229 19:28.500 --> 19:28.890 All right. 230 19:28.890 --> 19:31.070 So let's go through the solution together. 231 19:31.080 --> 19:38.670 Now, step one was to change the color of this particular element to a named color called coral. 232 19:38.670 --> 19:41.370 And the solution should look something like this. 233 19:42.090 --> 19:49.200 The second one is to change the font-size of this element to two times the size of the root element. 234 19:49.350 --> 19:56.340 Remember, to do that, we have to use the rem and two times the size is 2rem. 235 19:56.700 --> 20:01.980 I've selected it based on the size ID and I've changed the font-size to that. 236 20:03.050 --> 20:04.010 The next step, 237 20:04.010 --> 20:12.380 I've changed the font weight of this element to 900 by using the font-weight property and then we change 238 20:12.380 --> 20:19.460 the font family of this element to use the Caveat font with a regular font-weight. 239 20:19.670 --> 20:28.040 So I selected that font from there and then I added in all the required links just before the end of 240 20:28.040 --> 20:28.790 the head section, 241 20:28.790 --> 20:33.860 but outside of the style section. This is very important in terms of placement. 242 20:33.860 --> 20:39.140 And then I added in the font-family and a backup font in case it goes wrong. 243 20:39.620 --> 20:44.990 Next I changed this particular paragraph element so that it's right aligned. 244 20:44.990 --> 20:51.650 And finally I change the root, which is the html element to have a 30px font. 245 20:51.800 --> 21:00.350 And when that was changed, then the 2rem one, which is the Font Size element here, actually changes 246 21:00.350 --> 21:00.800 with it. 247 21:00.800 --> 21:05.100 So it gets bigger or it gets smaller depending on the root size. 248 21:05.100 --> 21:11.010 So hopefully, that was easy enough for you to complete and it tested you on all the things that we learned 249 21:11.010 --> 21:12.820 in this lesson so far. 250 21:12.840 --> 21:18.540 Once you're ready, head over to the next lesson where we're going to learn more about CSS Inspection 251 21:18.540 --> 21:23.700 and how you can find out what is happening with your CSS using the Chrome Developer Tools. 252 21:23.700 --> 21:26.220 So for all of that and more, I'll see you there.