1 00:00:00,290 --> 00:00:05,510 Now, in this lesson, we're going to talk a bit more about the different CSS properties that we can 2 00:00:05,510 --> 00:00:11,060 set for fonts so we can change the appearance of the text in our websites. 3 00:00:11,630 --> 00:00:18,050 And we've already seen some of them, for example, the color property which sets the text color, but 4 00:00:18,050 --> 00:00:25,820 there's other ones as well, such as the font weight, the font size and also the font family, which 5 00:00:25,820 --> 00:00:28,140 is the typeface that we want to use. 6 00:00:28,160 --> 00:00:30,680 Let's explore some of these newer ones. 7 00:00:30,710 --> 00:00:33,910 The first one I'll talk about is the font size. 8 00:00:33,920 --> 00: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 9 00:00:42,320 --> 00:00:45,890 pixel size, as you might have seen me do already. 10 00:00:46,280 --> 00:00:51,350 But if we think about it, what exactly does a 20 pixel font size mean? 11 00:00:51,350 --> 00:00:53,110 How big is it really? 12 00:00:53,120 --> 00:00:55,040 Well, this is how big it is. 13 00:00:55,040 --> 00:01:00,750 One pixel is about 1/96 of an inch. 14 00:01:00,750 --> 00:01:07,560 And the reason why we're using imperial units is because a lot of the sizing for websites and for design 15 00:01:07,560 --> 00:01:12,330 work actually comes from the olden days of book printing, book binding. 16 00:01:12,330 --> 00:01:14,010 And it was very traditional. 17 00:01:14,010 --> 00:01:20,220 If you know how big an inch is, then you know how big one over 96 of an inch is. 18 00:01:20,220 --> 00: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 19 00:01:26,670 --> 00:01:29,550 0.26mm. 20 00:01:29,550 --> 00:01:32,310 That's about how big a pixel is. 21 00:01:32,310 --> 00:01:39,150 It's 0.26mm wide and 0.26mm tall. 22 00:01:39,150 --> 00:01:43,620 So it's a small cube that's very, very tiny. 23 00:01:44,500 --> 00:01:50,800 There are other ways that we can represent the font size when we're writing CSS. 24 00:01:50,920 --> 00:01:58,090 One common way that you'll see in addition to pixels is using something called a point. 25 00:01:58,540 --> 00:02:06,010 A stands for a pixel and a P stands for a point. 26 00:02:06,100 --> 00:02:07,950 Now how big is a point? 27 00:02:07,960 --> 00:02:10,630 Well, it's a slightly bigger than a pixel. 28 00:02:10,630 --> 00:02:15,070 It's about one over 72 second of an inch. 29 00:02:15,070 --> 00:02:17,320 So that's just slightly bigger. 30 00:02:17,350 --> 00:02:30,880 If 1.96 of an inch is 0.26mm, one over 72 of an inch is about 0.35mm, just a tiny bit bigger. 31 00:02:30,940 --> 00:02:36,220 Now the point is actually often used in many different applications. 32 00:02:36,220 --> 00:02:45,350 So when you select a 12 size font in, say, word, you're actually selecting 12 points. 33 00:02:45,350 --> 00: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 34 00:02:50,930 --> 00:02:56,000 100%, it will look about the same as a 12 font on your word document. 35 00:02:56,090 --> 00:03:04,040 In addition, there are some other ways of representing font size, the M and the M. 36 00:03:04,160 --> 00:03:06,140 What are these units? 37 00:03:06,170 --> 00:03:13,520 Well, the M is actually not pronounced M It's pronounced M, so it's pronounced in the same way that 38 00:03:13,520 --> 00:03:16,100 this letter is in the alphabet. 39 00:03:16,370 --> 00:03:17,660 Why is that? 40 00:03:17,660 --> 00:03:24,170 Well, one M is defined as the full width of an M. 41 00:03:24,260 --> 00:03:32,150 The letter M is probably one of the widest letters in the English alphabet, and this unit simply represents 42 00:03:32,150 --> 00:03:33,950 that entire width. 43 00:03:34,430 --> 00:03:37,700 But what does it actually mean when we use it? 44 00:03:37,730 --> 00:03:46,850 Well, what it means is that when you set an H one to have the font size of one M, your CSS code would 45 00:03:46,850 --> 00:03:48,570 look something like this. 46 00:03:48,590 --> 00:03:58,910 Then it means that if it had a parent, for example, if we had a body tag that enclosed this h one 47 00:03:58,910 --> 00:04:13,100 tag, then if this body had a font size of say, 20 pixels, then this h one if we set it to one M or 48 00:04:13,100 --> 00:04:19,120 one M, then it means it's going to be a 100% of the parent size. 49 00:04:19,130 --> 00:04:21,829 So it means it's going to be 20 pixels. 50 00:04:22,070 --> 00:04:31,760 Now, however, if we set it to two M instead, then in this case it's going to be two times the parent 51 00:04:31,760 --> 00:04:32,450 size. 52 00:04:32,450 --> 00:04:37,940 So two times 20 pixels, which is going to be 40 pixels instead. 53 00:04:38,030 --> 00:04:41,090 It's basically a relative size. 54 00:04:41,450 --> 00:04:45,260 And I'm going to explain to you why this is important very shortly. 55 00:04:45,260 --> 00:04:52,730 But closely related to the M or the M is the M, and it's got that extra word. 56 00:04:52,760 --> 00:04:55,670 Ah, And basically it works the same thing. 57 00:04:55,670 --> 00:05:00,860 It's a relative size, but it's now relative instead of to the parent. 58 00:05:00,860 --> 00:05:08,840 It's relative to the root of your HTML file, which if you remember, the root is usually an HTML element 59 00:05:08,840 --> 00:05:11,750 that encloses everything inside. 60 00:05:12,770 --> 00:05:17,840 What is the difference then, between the M and the M? 61 00:05:18,170 --> 00: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 62 00:05:26,930 --> 00: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 63 00:05:33,950 --> 00:05:34,940 of your website. 64 00:05:35,030 --> 00:05:39,680 Then inside here we've got an H2 that's enclosed. 65 00:05:40,220 --> 00:05:52,250 If I set my H2 to have a font size of two M and my footer had a font size of 20 pixels, then two M 66 00:05:52,280 --> 00:05:57,860 is two times 20 pixels, which is equal to 40 pixels. 67 00:05:57,860 --> 00:06:00,860 So this H2 is now 40 pixels. 68 00:06:01,310 --> 00:06:08,810 However, if I go in here and I change this footer to have 80 pixels, then all of a sudden this is 69 00:06:08,810 --> 00:06:16,760 going to change and it's no longer going to be 40 pixels, but instead it's going to be two times 80, 70 00:06:16,790 --> 00:06:20,840 which is now equal to 160 pixels. 71 00:06:20,840 --> 00:06:25,310 So it's moving relative to its parent size. 72 00:06:25,610 --> 00:06:37,100 On the other hand, if I had set this H2 to have a size of two REM and I change the size of my footer 73 00:06:37,100 --> 00:06:43,760 from 20 pixels to 80 pixels, then it does not affect this. 74 00:06:43,820 --> 00:06:44,510 Whatsoever. 75 00:06:44,510 --> 00:06:47,200 It still remains the same size. 76 00:06:47,210 --> 00: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 77 00:06:55,340 --> 00:06:59,440 of the rest of the code, which is normally the HTML element. 78 00:06:59,450 --> 00:07:07,580 If I change this size to something larger, say 90 pixels, then that is the thing that will affect 79 00:07:07,580 --> 00:07:09,170 this sizing. 80 00:07:09,170 --> 00:07:19,100 So the main difference between the M and the M is the fact that this is a more consistent way of changing 81 00:07:19,100 --> 00:07:20,210 the sizing. 82 00:07:20,210 --> 00:07:27,230 So I normally recommend that everybody who develops websites when you're setting the font size to use 83 00:07:27,230 --> 00:07:32,960 the REM, because the way that you have different things embedded in others. 84 00:07:32,960 --> 00:07:39,170 So this H two is inside a footer which is inside the body, which is inside the HTML. 85 00:07:39,200 --> 00:07:46,100 Then the relationship to the parent can very quickly get very confused and you don't know whose parent 86 00:07:46,100 --> 00:07:49,730 you're referring to, especially when you're working in a separate CSS file. 87 00:07:49,820 --> 00:07:53,300 So understand how the REM works. 88 00:07:53,300 --> 00:07:58,670 Remember, it is a scaled size of the root one. 89 00:07:58,910 --> 00:08:03,980 M is one x, the root size two M is two x, the root size. 90 00:08:03,980 --> 00:08:09,770 And this is a much easier way to control the different sizes of various elements on your screen and 91 00:08:09,770 --> 00:08:15,440 have more clarity around what's going on in the starting file that you downloaded previously. 92 00:08:15,440 --> 00:08:17,750 I've got some sample code for you. 93 00:08:17,780 --> 00: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 94 00:08:25,040 --> 00:08:33,080 size, we can use point size, we can use M REM, and we can also use named font sizes such as extra 95 00:08:33,080 --> 00:08:34,970 large or large. 96 00:08:34,970 --> 00:08:40,159 And when all of this is rendered, you'll see the different sizes in play. 97 00:08:40,190 --> 00:08:48,780 The fact that a pixel is much smaller than a point, but these two are static font sizes and then the 98 00:08:48,780 --> 00:08:53,490 M is relative to the parent and the M is relative to the root. 99 00:08:53,490 --> 00:08:55,920 But these are relative sizes. 100 00:08:56,160 --> 00: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 101 00:09:02,190 --> 00:09:07,200 the zip file from this current lesson called 6.1 font properties. 102 00:09:07,590 --> 00:09:10,710 Once you've extracted it, open it up inside vs code. 103 00:09:10,710 --> 00:09:17,130 Head over to font size dot HTML and you'll see exactly the same code as in the demo. 104 00:09:17,130 --> 00:09:20,190 But in this case it's of course in VS code. 105 00:09:20,190 --> 00:09:26,820 So you can change things such as the REM, the m, the different font sizes, the root font size, and 106 00:09:26,820 --> 00:09:29,280 you'll see it reflected on the screen. 107 00:09:29,400 --> 00:09:36,360 For example, if I change this root font size from extra extra large down to say, 20 pixels, then 108 00:09:36,390 --> 00:09:44,790 you'll see that this paragraph change accordingly because its size is based on REM. 109 00:09:44,790 --> 00:09:48,960 So have a play around with that so that you can understand what's going on. 110 00:09:49,710 --> 00:09:53,940 There are some other font properties that I want to briefly cover. 111 00:09:53,940 --> 00:09:57,840 One is the font weight, which is relatively simple. 112 00:09:57,840 --> 00:10:01,710 You can have normal or you can have bold, and we all know what that means. 113 00:10:01,710 --> 00:10:04,050 It just makes the font look a bit heavier. 114 00:10:04,290 --> 00:10:09,210 But out in the wild you might see some other ways that people use to change the font weight. 115 00:10:09,210 --> 00:10:16,230 In addition to the basic keywords, you can have a relative font weight which is relative to the parent 116 00:10:16,230 --> 00:10:19,320 to have the font lighter or have it be bolder. 117 00:10:19,320 --> 00: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 118 00:10:29,520 --> 00:10:30,690 the font to be. 119 00:10:30,690 --> 00:10:37,710 And similarly, when we say lighter it basically minuses the number by 100. 120 00:10:37,710 --> 00:10:41,370 And if we say bolder, it just makes it bolder by 100. 121 00:10:41,370 --> 00:10:49,560 Somewhere along this range, in addition to font size and font weight, there's also the all important 122 00:10:49,560 --> 00:10:50,880 font family. 123 00:10:50,880 --> 00:10:55,380 And this determines what you want your text to look like. 124 00:10:55,410 --> 00:11:01,320 For example, in this first example, we've got the font family that is set to Helvetica. 125 00:11:01,350 --> 00:11:10,260 This is a particular typeface and the name is called Helvetica, but this is a mac specific typeface. 126 00:11:10,260 --> 00:11:15,360 So there are many Windows computers that do not own this typeface. 127 00:11:15,480 --> 00: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 128 00:11:23,520 --> 00:11:28,350 and then we have a backup generic font type. 129 00:11:28,830 --> 00:11:31,920 So in this case it's a sans serif. 130 00:11:32,310 --> 00:11:38,550 A sans serif is simply the type of font where all the edges are pretty much at right angles. 131 00:11:38,550 --> 00:11:43,230 If you had these little feet or these little decorations at the edges. 132 00:11:43,340 --> 00:11:48,790 Of your letters, then very often what you're looking at is a serif type font. 133 00:11:48,820 --> 00:11:52,450 So that's the main two types of different typefaces. 134 00:11:52,450 --> 00:11:54,370 And in later lessons, we. 135 00:11:54,400 --> 00:11:56,620 Cover typefaces in more detail. 136 00:11:56,620 --> 00:12:01,000 So you can either search for that lesson or wait until it comes up to learn more about that. 137 00:12:01,570 --> 00:12:05,750 What is important, though, is having this generic typeface. 138 00:12:05,770 --> 00:12:13,180 This means that when you have this set that Mac users will see this font, but Windows users will see 139 00:12:13,180 --> 00:12:18,610 something that's relatively equivalent and it will be automatically displayed for them when it doesn't 140 00:12:18,610 --> 00:12:19,330 work. 141 00:12:20,020 --> 00:12:23,860 Now what if you have a font that has many words in it? 142 00:12:23,860 --> 00:12:27,550 For example, times new Roman consists of three words. 143 00:12:27,580 --> 00:12:32,450 Well, in this case, we can't simply just type it out like this and then have a comma. 144 00:12:32,470 --> 00:12:38,890 We actually need the quotation marks around it so that we can tell the CSS file that there are spaces 145 00:12:38,890 --> 00:12:41,050 in the name of the font family. 146 00:12:41,050 --> 00:12:43,850 So just be careful about that when you're using it. 147 00:12:44,180 --> 00:12:52,220 And because times new Roman is a serif type font, then the backup, the generic type is also a serif. 148 00:12:52,730 --> 00:12:59,120 Now what if you want a completely custom font that maybe the user doesn't have? 149 00:12:59,150 --> 00:13:05,390 Well, one of the best places to find free fonts is going over to Fonts.google.com. 150 00:13:05,570 --> 00:13:12,050 And here you can find all sorts of different fonts and there are so, so many for you to choose from 151 00:13:12,050 --> 00:13:14,570 and you can browse to your heart's content. 152 00:13:14,720 --> 00:13:16,550 Now I want you to do this with me. 153 00:13:16,580 --> 00:13:20,480 Go over to Fonts.google.com, find a font that you like. 154 00:13:20,510 --> 00: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 155 00:13:27,710 --> 00:13:31,100 font faces for the different weights. 156 00:13:31,100 --> 00:13:34,850 So there's Bold, which is 700 or regular 400. 157 00:13:34,850 --> 00:13:40,700 But then other fonts you might see in here doesn't actually have any weight other than just the regular 158 00:13:40,700 --> 00:13:45,240 one that you can use depending on which of these type you have. 159 00:13:45,260 --> 00:13:48,740 Simply select the weight that you're interested in. 160 00:13:48,740 --> 00:13:57,800 For example, with this font, maybe I want the medium size, and with this font, maybe I'm just going 161 00:13:57,800 --> 00:13:59,420 to select a regular one. 162 00:13:59,540 --> 00:14:04,940 And once you've selected that, if you go to the top right corner, you can see all of your selections. 163 00:14:04,940 --> 00:14:09,470 So you can remove all or you can remove the ones that you're not interested in. 164 00:14:09,470 --> 00:14:13,480 But either way, you should end up with a font that you want to include. 165 00:14:13,490 --> 00:14:19,520 Now make sure that that link is selected and then copy that over to your starting file. 166 00:14:19,520 --> 00:14:26,450 So select the font family dot html inside the head element just after the style tag. 167 00:14:26,450 --> 00: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 168 00:14:33,680 --> 00:14:35,870 for any user on the internet. 169 00:14:35,870 --> 00: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, 170 00:14:41,360 --> 00:14:45,680 they'll all be able to access this font because we're including it in the link. 171 00:14:45,680 --> 00:14:51,680 And then let's go ahead and copy the CSS rule, which Google has very helpfully included for us. 172 00:14:51,680 --> 00: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 173 00:14:57,980 --> 00:15:01,760 easily see the CSS alongside the HTML on the same file. 174 00:15:01,760 --> 00:15:03,530 While we're doing the exercise. 175 00:15:03,530 --> 00: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 176 00:15:11,210 --> 00:15:13,160 is what this page is all about. 177 00:15:13,160 --> 00:15:16,430 And then let's right click and show it in the preview. 178 00:15:16,520 --> 00:15:23,070 Now I want you to set the H1 CSS style to the one that you just copied over. 179 00:15:23,090 --> 00:15:26,120 Pause the video and do that right now. 180 00:15:27,990 --> 00:15:28,320 All right. 181 00:15:28,320 --> 00:15:34,710 So we need to target the H, one of which we've only got one so we can use the element selector and 182 00:15:34,710 --> 00:15:38,490 then we paste in our CSS style as easy as that. 183 00:15:38,490 --> 00:15:45,510 And you'll notice immediately that updates that font into our custom font from Google. 184 00:15:45,510 --> 00:15:50,790 And it doesn't matter what you've chosen, this should always work as long as you've included all of 185 00:15:50,790 --> 00:15:55,770 the links that are required and added in the relevant CSS. 186 00:15:56,040 --> 00:16:02,730 Also on this page you'll see the different font families, for example, the Helvetica and the sans 187 00:16:02,730 --> 00:16:03,390 serif. 188 00:16:03,390 --> 00:16:05,700 Or on a windows. 189 00:16:05,700 --> 00:16:09,000 The default sans serif will be an Ariel type font. 190 00:16:09,000 --> 00:16:14,940 And then you've got serif type fonts, which are the ones with the little feet that I mentioned. 191 00:16:14,970 --> 00:16:22,230 You've got these sans serif fonts and you've got all of these other generics such as cursive monospace 192 00:16:22,230 --> 00:16:25,830 and fantasy cursive is a little bit curly. 193 00:16:25,830 --> 00:16:26,970 That's how I remember it. 194 00:16:27,000 --> 00:16:34,600 Monospace has all the letters occupying the same width, so similar to a typewriter or code, and fantasy 195 00:16:34,600 --> 00:16:36,250 is usually something kind of wild. 196 00:16:36,250 --> 00:16:41,740 And these generic fonts will be different depending on the computer that you use and the browser that 197 00:16:41,740 --> 00:16:42,190 you use. 198 00:16:42,190 --> 00: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 199 00:16:49,240 --> 00: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. 200 00:16:55,780 --> 00:17:04,420 And notice how when we copy that over it specified the specific font, but also a backup font in case 201 00:17:04,420 --> 00:17:09,640 these links didn't work or something messed up and it would default to a cursive font. 202 00:17:09,819 --> 00:17:13,480 The generic cursive font would then look like this. 203 00:17:14,200 --> 00:17:21,069 So the final thing I want to talk about in terms of text styling is alignment. 204 00:17:21,069 --> 00:17:22,720 So text alignment. 205 00:17:22,720 --> 00:17:30,120 And this, this property called text align where you can set it to say centered or you can set it to 206 00:17:30,120 --> 00:17:32,580 the left or to the right. 207 00:17:32,580 --> 00:17:36,810 And you've also got some values like start and end. 208 00:17:36,810 --> 00:17:43,500 And basically start is when you have text that maybe starts writing from the right to left, such as 209 00:17:43,500 --> 00:17:44,520 in Arabic. 210 00:17:44,520 --> 00:17:49,680 And so in this case, the start is actually here and the end is here. 211 00:17:49,680 --> 00:17:56,220 But then if you're working with Western text, then the start will be right here and the end will be 212 00:17:56,220 --> 00:17:57,000 right here. 213 00:17:57,120 --> 00:18:01,800 That's just a more flexible way of determining the text align. 214 00:18:01,800 --> 00:18:10,410 But all in all, this is a pretty simple property and you can take a look at it in the docs to learn 215 00:18:10,410 --> 00:18:18,780 more about what the other values in addition to start end are and try the demo to see how they work. 216 00:18:19,200 --> 00: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 217 00:18:27,210 --> 00:18:27,690 here. 218 00:18:27,930 --> 00:18:36,160 There's a number of to do's I want you to complete and I want you to go through them one by one. 219 00:18:36,160 --> 00:18:43,000 It involves changing some colors, changing some font sizes, font weight, font, family, the text 220 00:18:43,000 --> 00:18:48,070 align and also changing a root element font size. 221 00:18:48,580 --> 00:18:54,400 The important thing is that you don't change any of the CSS that's already included, but instead write 222 00:18:54,400 --> 00:19:01,750 your CSS below in this internal style element so that you can quickly refer to the to do's and see what 223 00:19:01,750 --> 00:19:03,760 you need to write in the CSS. 224 00:19:03,790 --> 00:19:06,700 Don't worry too much about setting external CSS. 225 00:19:06,730 --> 00:19:10,330 We're just completing this as a quick exercise. 226 00:19:10,600 --> 00:19:15,190 And remember, while you're doing this, if you want to see what the end result should look like, go 227 00:19:15,190 --> 00:19:17,110 ahead into the goal dot PNG. 228 00:19:17,410 --> 00:19:22,000 To see all the colors and layout and relative sizes of everything. 229 00:19:22,030 --> 00:19:25,570 Pause the video now and go through each of these two dos. 230 00:19:28,500 --> 00:19:28,890 All right. 231 00:19:28,890 --> 00:19:31,070 So let's go through the solution together. 232 00:19:31,080 --> 00:19:38,670 Now, step one was to change the color of this particular element to a named color called coral. 233 00:19:38,670 --> 00:19:41,370 And the solution should look something like this. 234 00:19:42,090 --> 00:19:49,200 The second one is to change the font size of this element to two times the size of the root element. 235 00:19:49,350 --> 00:19:56,340 Remember, to do that, we have to use the REM and two times the size is two REM. 236 00:19:56,700 --> 00:20:01,980 I've selected it based on the size ID and I've changed the font size to that. 237 00:20:03,050 --> 00:20:04,010 The next step. 238 00:20:04,010 --> 00:20:12,380 I've changed the font weight of this element to 900 by using the font weight property and then we change 239 00:20:12,380 --> 00:20:19,460 the font family of this element to use the caveat font with a regular font weight. 240 00:20:19,670 --> 00:20:28,040 So I selected that font from there and then I added in all the required links just before the end of 241 00:20:28,040 --> 00:20:28,790 the head section. 242 00:20:28,790 --> 00:20:33,860 But outside of the style section, this is very important in terms of placement. 243 00:20:33,860 --> 00:20:39,140 And then I added in the font family and a backup font in case it goes wrong. 244 00:20:39,620 --> 00:20:44,990 Next I changed this particular paragraph element so that it's right aligned. 245 00:20:44,990 --> 00:20:51,650 And finally I change the route, which is the HTML element to have a 30 pixel font. 246 00:20:51,800 --> 00:21:00,350 And when that was changed, then the two REM one, which is the font size element here, actually changes 247 00:21:00,350 --> 00:21:00,800 with it. 248 00:21:00,800 --> 00:21:05,100 So it gets bigger or it gets smaller depending on the route size. 249 00:21:05,100 --> 00:21:11,010 So hopefully that was easy enough for you to complete and it tested you on all the things that we learned 250 00:21:11,010 --> 00:21:12,820 in this lesson so far. 251 00:21:12,840 --> 00:21:18,540 Once you're ready, head over to the next lesson where we're going to learn more about CSS inspection 252 00:21:18,540 --> 00:21:23,700 and how you can find out what is happening with your CSS using the Chrome developer tools. 253 00:21:23,700 --> 00:21:26,220 So for all of that and more, I'll see you there.