1 00:00:00,160 --> 00:00:01,710 Instructor: Now in this lesson, 2 00:00:01,710 --> 00:00:02,760 we're gonna talk a bit more 3 00:00:02,760 --> 00:00:07,440 about the different CSS properties that we can set for fonts 4 00:00:07,440 --> 00:00:11,073 so we can change the appearance of the text in our websites. 5 00:00:12,060 --> 00:00:13,770 And we've already seen some of them, 6 00:00:13,770 --> 00:00:17,970 for example, the color property, which sets the text color, 7 00:00:17,970 --> 00:00:19,350 but there's other ones as well, 8 00:00:19,350 --> 00:00:23,610 such as the font weight, the font size, 9 00:00:23,610 --> 00:00:25,680 and also the font family, 10 00:00:25,680 --> 00:00:28,410 which is the typeface that we wanna use. 11 00:00:28,410 --> 00:00:30,960 Let's explore some of these newer ones. 12 00:00:30,960 --> 00:00:34,230 The first one I'll talk about is the font size. 13 00:00:34,230 --> 00:00:37,020 We can change the size of a font 14 00:00:37,020 --> 00:00:39,900 by simply using the font size property 15 00:00:39,900 --> 00:00:43,560 and then setting it to a particular pixel size, 16 00:00:43,560 --> 00:00:46,590 as you might have seen me do already, 17 00:00:46,590 --> 00:00:47,970 but if we think about it, 18 00:00:47,970 --> 00:00:51,420 what exactly does a 20 pixel font size mean? 19 00:00:51,420 --> 00:00:53,400 How big is it, really? 20 00:00:53,400 --> 00:00:55,110 Well, this is how big it is. 21 00:00:55,110 --> 00:01:00,110 One pixel is about 1/96 of an inch, 22 00:01:00,960 --> 00:01:03,330 and the reason why we're using Imperial units 23 00:01:03,330 --> 00:01:06,630 is because a lot of this sizing for websites 24 00:01:06,630 --> 00:01:08,070 and for design work 25 00:01:08,070 --> 00:01:09,840 actually comes from the olden days 26 00:01:09,840 --> 00:01:14,160 of book printing, bookbinding, and it was very traditional. 27 00:01:14,160 --> 00:01:15,810 If you know how big an inch is, 28 00:01:15,810 --> 00:01:20,160 then you know how big 1/96 of an inch is. 29 00:01:20,160 --> 00:01:21,840 It's absolutely tiny, 30 00:01:21,840 --> 00:01:23,910 but if you have no idea how big an inch is, 31 00:01:23,910 --> 00:01:28,910 then in metric units, it's about 0.26 millimeters. 32 00:01:29,346 --> 00:01:32,340 That's about how big a pixel is. 33 00:01:32,340 --> 00:01:37,340 It's 0.26 millimeters wide and 0.26 millimeters tall. 34 00:01:39,300 --> 00:01:43,503 So it's a small cube that's very, very tiny. 35 00:01:44,730 --> 00:01:48,635 There are other ways that we can represent the font size 36 00:01:48,635 --> 00:01:51,240 when we're writing CSS. 37 00:01:51,240 --> 00:01:55,230 One common way that you'll see in addition to pixels 38 00:01:55,230 --> 00:01:58,590 is using something called a point. 39 00:01:58,590 --> 00:02:03,590 A px stands for a pixel, and a pt stands for a point. 40 00:02:06,420 --> 00:02:08,039 Now how big is a point? 41 00:02:08,039 --> 00:02:10,413 Well, it's slightly bigger than a pixel. 42 00:02:10,413 --> 00:02:15,413 It's about 1/72 of an inch, so that's just slightly bigger. 43 00:02:17,580 --> 00:02:22,580 If 1.96 of an inch is 0.26 millimeters, 44 00:02:23,040 --> 00:02:28,040 1/72 of an inch is about naught 0.35 millimeters, 45 00:02:28,920 --> 00:02:31,290 just a tiny bit bigger. 46 00:02:31,290 --> 00:02:33,870 Now, the point is actually often used 47 00:02:33,870 --> 00:02:36,450 in many different applications, 48 00:02:36,450 --> 00:02:41,450 so when you select a 12 size font in say Word, 49 00:02:42,750 --> 00:02:45,570 you're actually selecting 12 points. 50 00:02:45,570 --> 00:02:48,840 So that means when you're using 12 points on your webpage, 51 00:02:48,840 --> 00:02:51,660 you can expect that when a website's at 100%, 52 00:02:51,660 --> 00:02:53,010 it'll look about the same 53 00:02:53,010 --> 00:02:56,250 as a 12 font on your Word document. 54 00:02:56,250 --> 00:02:58,920 In addition, there are some other ways 55 00:02:58,920 --> 00:03:03,920 of representing font size, the em and the rem. 56 00:03:04,350 --> 00:03:06,360 What are these units? 57 00:03:06,360 --> 00:03:09,600 Well, the em is actually not pronounced E-M, 58 00:03:09,600 --> 00:03:11,190 it's pronounced em, 59 00:03:11,190 --> 00:03:13,260 so it's pronounced in the same way 60 00:03:13,260 --> 00:03:16,500 that this letter is in the alphabet. 61 00:03:16,500 --> 00:03:17,700 Why is that? 62 00:03:17,700 --> 00:03:22,700 Well, one em is defined as the full width of an M. 63 00:03:24,420 --> 00:03:27,750 The letter M is probably one of the widest letters 64 00:03:27,750 --> 00:03:29,730 in the English alphabet, 65 00:03:29,730 --> 00:03:33,813 and this unit simply represents that entire width. 66 00:03:34,710 --> 00:03:37,860 But what does it actually mean when we use it? 67 00:03:37,860 --> 00:03:41,820 Well, what it means is that when you set an H1 68 00:03:41,820 --> 00:03:45,510 to have the font size of one em, 69 00:03:45,510 --> 00:03:48,840 your CSS code would look something like this, 70 00:03:48,840 --> 00:03:53,100 then it means that if it had a parent, 71 00:03:53,100 --> 00:03:58,100 for example, if we had a body tag that enclosed this H1 tag, 72 00:04:00,630 --> 00:04:05,630 then if this body had a font size of say 20 pixels, 73 00:04:08,670 --> 00:04:13,670 then this H1, if we set it to one em or one em, 74 00:04:14,460 --> 00:04:19,230 then it means it's going to be 100% of the parent's size, 75 00:04:19,230 --> 00:04:22,290 so it means it's gonna be 20 pixels. 76 00:04:22,290 --> 00:04:27,030 Now, however, if we set it to two em instead, 77 00:04:27,030 --> 00:04:28,260 then in this case, 78 00:04:28,260 --> 00:04:32,520 it's going to be two times the parent's size, 79 00:04:32,520 --> 00:04:34,920 so two times 20 pixels, 80 00:04:34,920 --> 00:04:38,160 which is going to be 40 pixels instead. 81 00:04:38,160 --> 00:04:41,307 It's basically a relative size, 82 00:04:41,307 --> 00:04:42,810 and I'm gonna explain to you 83 00:04:42,810 --> 00:04:45,540 why this is important very shortly, 84 00:04:45,540 --> 00:04:50,197 but closely related to the em or the em is the rem, 85 00:04:51,210 --> 00:04:53,730 and it's got that extra word R, 86 00:04:53,730 --> 00:04:55,650 and basically it works the same thing. 87 00:04:55,650 --> 00:04:59,370 It's a relative size, but it's now relative. 88 00:04:59,370 --> 00:05:00,870 Instead of to the parent, 89 00:05:00,870 --> 00:05:04,650 it's relative to the root of your HTML file, 90 00:05:04,650 --> 00:05:08,850 which if you remember, the root is usually an HTML element 91 00:05:08,850 --> 00:05:11,583 that encloses everything inside. 92 00:05:12,930 --> 00:05:17,930 What is the difference then between the em and the rem? 93 00:05:18,330 --> 00:05:20,400 If we take a look at this code 94 00:05:20,400 --> 00:05:25,290 where we've got a body tag that encloses an H1, 95 00:05:25,290 --> 00:05:27,540 and then we've got a footer tag, 96 00:05:27,540 --> 00:05:29,197 which is one of the tags that you can use 97 00:05:29,197 --> 00:05:32,130 to define a section in your code 98 00:05:32,130 --> 00:05:35,250 for the footer area of your website, 99 00:05:35,250 --> 00:05:39,513 then inside here we've got an H2 that's enclosed. 100 00:05:40,410 --> 00:05:45,193 If I set my H2 to have a font size of two em, 101 00:05:46,170 --> 00:05:50,520 and my footer had a font size of 20 pixels, 102 00:05:50,520 --> 00:05:54,870 then two em is two times 20 pixels, 103 00:05:54,870 --> 00:05:59,870 which is equal to 40 pixels, so this H2 is now 40 pixels. 104 00:06:01,350 --> 00:06:02,970 However, if I go in here 105 00:06:02,970 --> 00:06:07,050 and I change this footer to have 80 pixels, 106 00:06:07,050 --> 00:06:09,720 then all of a sudden, this is going to change, 107 00:06:09,720 --> 00:06:12,600 and it's no longer going to be 40 pixels, 108 00:06:12,600 --> 00:06:16,980 but instead it's going to be two times 80, 109 00:06:16,980 --> 00:06:20,970 which is now equal to 160 pixels, 110 00:06:20,970 --> 00:06:25,770 so it's moving relative to its parent's size. 111 00:06:25,770 --> 00:06:29,820 On the other hand, if I had set this H2 112 00:06:29,820 --> 00:06:33,870 to have a size of two rem, 113 00:06:33,870 --> 00:06:37,140 and I change the size of my footer 114 00:06:37,140 --> 00:06:41,370 from 20 pixels to 80 pixels, 115 00:06:41,370 --> 00:06:44,520 then it does not affect this whatsoever. 116 00:06:44,520 --> 00:06:47,520 It still remains the same size. 117 00:06:47,520 --> 00:06:51,240 It's only if I change the root element, 118 00:06:51,240 --> 00:06:52,710 which if you take a look, 119 00:06:52,710 --> 00:06:56,970 it's the thing that encloses all of the rest of the code, 120 00:06:56,970 --> 00:06:59,670 which is normally the HTML element. 121 00:06:59,670 --> 00:07:04,380 If I change this size to something larger, say 90 pixels, 122 00:07:04,380 --> 00:07:09,380 then that is the thing that will affect this sizing. 123 00:07:09,480 --> 00:07:14,070 So the main difference between the rem and the em 124 00:07:14,070 --> 00:07:18,090 is the fact that this is a more consistent way 125 00:07:18,090 --> 00:07:20,430 of changing the sizing. 126 00:07:20,430 --> 00:07:22,140 So I normally recommend 127 00:07:22,140 --> 00:07:25,080 that everybody who develops websites, 128 00:07:25,080 --> 00:07:29,010 when you're setting the font size to use the rem, 129 00:07:29,010 --> 00:07:31,650 because the way that you have different things 130 00:07:31,650 --> 00:07:33,180 embedded in others, 131 00:07:33,180 --> 00:07:37,080 so this H2 is inside a footer, which is inside the body, 132 00:07:37,080 --> 00:07:39,480 which is inside the HTML, 133 00:07:39,480 --> 00:07:41,490 then the relationship to the parent 134 00:07:41,490 --> 00:07:44,550 can very quickly get very confusing, 135 00:07:44,550 --> 00:07:47,040 and you don't know who's parent we're referring to, 136 00:07:47,040 --> 00:07:50,130 especially when you're working in a separate CSS file. 137 00:07:50,130 --> 00:07:53,400 So understand how the rem works. 138 00:07:53,400 --> 00:07:58,200 Remember, it is a scaled size of the root. 139 00:07:58,200 --> 00:08:01,440 One rem is one X the root size, 140 00:08:01,440 --> 00:08:04,260 two rem is two X the root size, 141 00:08:04,260 --> 00:08:07,380 and this is a much easier way to control the different sizes 142 00:08:07,380 --> 00:08:09,510 of various elements on your screen 143 00:08:09,510 --> 00:08:12,660 and have more clarity around what's going on. 144 00:08:12,660 --> 00:08:15,570 In the starting file that you downloaded previously, 145 00:08:15,570 --> 00:08:18,000 I've got some sample code for you. 146 00:08:18,000 --> 00:08:20,340 If we take a look at all the different ways 147 00:08:20,340 --> 00:08:22,590 of setting font size, 148 00:08:22,590 --> 00:08:25,530 you can see that we can use the pixel size, 149 00:08:25,530 --> 00:08:28,920 we can use point size, we can use em, rem, 150 00:08:28,920 --> 00:08:31,920 and we can also use named font sizes, 151 00:08:31,920 --> 00:08:35,280 such as extra large or large, 152 00:08:35,280 --> 00:08:38,190 and when all of this is rendered, 153 00:08:38,190 --> 00:08:40,440 you'll see the different sizes in play. 154 00:08:40,440 --> 00:08:44,220 The fact that a pixel is much smaller than a point, 155 00:08:44,220 --> 00:08:47,850 but these two are static font sizes, 156 00:08:47,850 --> 00:08:50,718 and then the em is relative to the parent 157 00:08:50,718 --> 00:08:53,640 and the rem is relative to the root, 158 00:08:53,640 --> 00:08:55,909 but these are relative sizes. 159 00:08:55,909 --> 00:08:57,720 If you wanna see this code 160 00:08:57,720 --> 00:09:01,200 and be able to edit it and change it and see it working, 161 00:09:01,200 --> 00:09:04,650 then download the zipped file from this current lesson 162 00:09:04,650 --> 00:09:07,650 called 6.1 Font Properties. 163 00:09:07,650 --> 00:09:10,650 Once you've extracted it, open it up inside VS Code, 164 00:09:10,650 --> 00:09:13,350 head over to font-size.html, 165 00:09:13,350 --> 00:09:17,370 and you'll see exactly the same code as in the demo. 166 00:09:17,370 --> 00:09:20,190 But in this case, it's of course, in VS Code, 167 00:09:20,190 --> 00:09:23,730 so you can change things such as the rem, the em, 168 00:09:23,730 --> 00:09:26,640 the different font sizes, the root font size, 169 00:09:26,640 --> 00:09:29,490 and you'll see it reflected on the screen. 170 00:09:29,490 --> 00:09:32,220 For example, if I change this root font size 171 00:09:32,220 --> 00:09:36,150 from extra extra large down to say 20 pixels, 172 00:09:36,150 --> 00:09:40,890 then you'll see that this paragraph changed accordingly 173 00:09:40,890 --> 00:09:44,970 because its size is based on rem. 174 00:09:44,970 --> 00:09:46,560 So have a play around with that 175 00:09:46,560 --> 00:09:48,843 so that you can understand what's going on. 176 00:09:49,890 --> 00:09:51,990 There are some other font properties 177 00:09:51,990 --> 00:09:54,150 that I want to briefly cover. 178 00:09:54,150 --> 00:09:57,780 One is the font weight, which is relatively simple. 179 00:09:57,780 --> 00:10:00,240 You can have normal or you can have bold, 180 00:10:00,240 --> 00:10:01,680 and we all know what that means. 181 00:10:01,680 --> 00:10:04,500 It just makes the font look a bit heavier. 182 00:10:04,500 --> 00:10:05,550 But out in the world, 183 00:10:05,550 --> 00:10:06,840 you might see some other ways 184 00:10:06,840 --> 00:10:09,330 that people use to change the font weight 185 00:10:09,330 --> 00:10:12,060 in addition to the basic keywords. 186 00:10:12,060 --> 00:10:14,310 You can have a relative font weight 187 00:10:14,310 --> 00:10:16,350 which is relative to the parent 188 00:10:16,350 --> 00:10:19,500 to have the font lighter or have it be bolder. 189 00:10:19,500 --> 00:10:24,500 In addition, you can also use a number from 100 up to 900 190 00:10:24,870 --> 00:10:29,870 to determine how light or how bold you want the font to be. 191 00:10:30,960 --> 00:10:33,420 And similarly, when we say lighter, 192 00:10:33,420 --> 00:10:37,830 it basically minuses the number by 100, 193 00:10:37,830 --> 00:10:39,030 and if we say bolder, 194 00:10:39,030 --> 00:10:42,903 it just makes it bolder by 100, somewhere along this range. 195 00:10:43,890 --> 00:10:47,790 In addition to font size and font weight, 196 00:10:47,790 --> 00:10:51,090 there's also the all-important font family, 197 00:10:51,090 --> 00:10:55,470 and this determines what you want your text to look like. 198 00:10:55,470 --> 00:10:57,540 For example, in this first example, 199 00:10:57,540 --> 00:11:01,470 we've got the font family that is set to Helvetica. 200 00:11:01,470 --> 00:11:04,380 This is a particular typeface, 201 00:11:04,380 --> 00:11:06,516 and the name is called Helvetica 202 00:11:06,516 --> 00:11:10,290 but this is a Mac-specific typeface, 203 00:11:10,290 --> 00:11:12,600 so there are many Windows computers 204 00:11:12,600 --> 00:11:15,660 that do not own this typeface. 205 00:11:15,660 --> 00:11:19,260 That's why, very often when we write a font family, 206 00:11:19,260 --> 00:11:21,840 we don't just write the font name. 207 00:11:21,840 --> 00:11:26,840 We have a comma and then we have a backup generic font type, 208 00:11:29,040 --> 00:11:31,926 so in this case, it's a sans serif. 209 00:11:31,926 --> 00:11:35,220 A sans serif is simply the type of font 210 00:11:35,220 --> 00:11:38,790 where all the edges are pretty much at right angles. 211 00:11:38,790 --> 00:11:42,450 If you had these little feed or these little decorations 212 00:11:42,450 --> 00:11:44,670 at the edges of your letters, 213 00:11:44,670 --> 00:11:49,110 then very often what you're looking at is a serif type font. 214 00:11:49,110 --> 00:11:52,620 So that's the main two types of different typefaces, 215 00:11:52,620 --> 00:11:56,790 and in later lessons, we cover type faces in more detail, 216 00:11:56,790 --> 00:11:58,290 so you can either search for that lesson 217 00:11:58,290 --> 00:12:00,933 or wait until it comes up to learn more about that. 218 00:12:01,830 --> 00:12:06,060 What is important, though, is having this generic typeface. 219 00:12:06,060 --> 00:12:08,880 This means that when you have this set, 220 00:12:08,880 --> 00:12:11,580 that Mac users will see this font 221 00:12:11,580 --> 00:12:13,800 but Windows users will see something 222 00:12:13,800 --> 00:12:15,450 that's relatively equivalent 223 00:12:15,450 --> 00:12:17,910 and it'll be automatically displayed for them 224 00:12:17,910 --> 00:12:19,293 when it doesn't work. 225 00:12:20,310 --> 00:12:24,060 Now, what if you have a font that has many words in it? 226 00:12:24,060 --> 00:12:27,780 For example, Times New Roman consists of three words. 227 00:12:27,780 --> 00:12:28,740 Well, in this case, 228 00:12:28,740 --> 00:12:31,500 we can't simply just type it out like this 229 00:12:31,500 --> 00:12:32,580 and then have a comma. 230 00:12:32,580 --> 00:12:35,640 We actually need the quotation marks around it 231 00:12:35,640 --> 00:12:37,470 so that we can tell the CSS file 232 00:12:37,470 --> 00:12:41,160 that there are spaces in the name of the font family. 233 00:12:41,160 --> 00:12:44,460 So just be careful about that when you're using it. 234 00:12:44,460 --> 00:12:48,030 And because Times New Roman is a serif type font, 235 00:12:48,030 --> 00:12:52,113 then the backup, the generic type is also a serif. 236 00:12:52,950 --> 00:12:56,550 Now, what if you want a completely custom font 237 00:12:56,550 --> 00:12:59,370 that maybe the user doesn't have? 238 00:12:59,370 --> 00:13:02,280 Well, one of the best places to find free fonts 239 00:13:02,280 --> 00:13:05,790 is going over to fonts.google.com, 240 00:13:05,790 --> 00:13:09,090 and here you can find all sorts of different fonts, 241 00:13:09,090 --> 00:13:12,180 and there are so, so many for you to choose from 242 00:13:12,180 --> 00:13:14,970 and you can browse to your heart's content. 243 00:13:14,970 --> 00:13:16,500 Now, I want you to do this with me. 244 00:13:16,500 --> 00:13:18,690 Go over to fonts.google.com. 245 00:13:18,690 --> 00:13:20,700 Find a font that you like. 246 00:13:20,700 --> 00:13:23,310 So maybe I really like a particular font, 247 00:13:23,310 --> 00:13:24,870 and if you click on it, 248 00:13:24,870 --> 00:13:28,650 sometimes you'll see that it has different font faces 249 00:13:28,650 --> 00:13:31,110 for the different weights. 250 00:13:31,110 --> 00:13:35,040 So there's bold, which is 700, or regular at 400, 251 00:13:35,040 --> 00:13:37,830 but then other fonts you might see in here 252 00:13:37,830 --> 00:13:39,330 doesn't actually have any weight 253 00:13:39,330 --> 00:13:42,480 other than just the regular one that you can use. 254 00:13:42,480 --> 00:13:45,330 Depending on which of these types you have, 255 00:13:45,330 --> 00:13:48,720 simply select the weight that you're interested in. 256 00:13:48,720 --> 00:13:53,720 For example, with this font, maybe I want the medium size, 257 00:13:53,730 --> 00:13:56,599 and with this font, 258 00:13:56,599 --> 00:13:59,460 maybe I'm just gonna select a regular one. 259 00:13:59,460 --> 00:14:01,200 And once you've selected that, 260 00:14:01,200 --> 00:14:02,820 if you go to the top right corner, 261 00:14:02,820 --> 00:14:05,100 you can see all of your selections. 262 00:14:05,100 --> 00:14:06,600 So you can remove all 263 00:14:06,600 --> 00:14:09,600 or you can remove the ones that you're not interested in, 264 00:14:09,600 --> 00:14:10,530 but either way, 265 00:14:10,530 --> 00:14:13,740 you should end up with a font that you want to include. 266 00:14:13,740 --> 00:14:16,140 Now make sure that that link is selected 267 00:14:16,140 --> 00:14:19,500 and then copy that over to your starting file. 268 00:14:19,500 --> 00:14:22,230 So select the font-family.html. 269 00:14:22,230 --> 00:14:26,430 Inside the head element just after the style tag, 270 00:14:26,430 --> 00:14:29,130 go ahead and paste all of that in, 271 00:14:29,130 --> 00:14:31,380 and this is basically a link 272 00:14:31,380 --> 00:14:33,780 that is going to pull in the Google font 273 00:14:33,780 --> 00:14:35,850 for any user on the internet. 274 00:14:35,850 --> 00:14:38,460 So it doesn't matter if they have a Mac or a PC 275 00:14:38,460 --> 00:14:41,460 or which fonts they have downloaded on their computer, 276 00:14:41,460 --> 00:14:43,380 they'll all be able to access this font 277 00:14:43,380 --> 00:14:45,870 because we're including it in the link. 278 00:14:45,870 --> 00:14:48,780 And then let's go ahead and copy the CSS rule, 279 00:14:48,780 --> 00:14:51,900 which Google has very helpfully included for us, 280 00:14:51,900 --> 00:14:53,640 and if you scroll up, 281 00:14:53,640 --> 00:14:57,150 you'll see that I've again got an internal style set in here 282 00:14:57,150 --> 00:14:59,520 so that we can more easily see the CSS 283 00:14:59,520 --> 00:15:01,740 alongside the HTML on the same file 284 00:15:01,740 --> 00:15:03,570 while we're doing the exercise. 285 00:15:03,570 --> 00:15:06,780 Let's go ahead and create an H1 here, 286 00:15:06,780 --> 00:15:10,620 and I'm simply going to write the words, "Front Family," 287 00:15:10,620 --> 00:15:13,290 because that is what this page is all about, 288 00:15:13,290 --> 00:15:16,710 and then let's right click and show it in the preview. 289 00:15:16,710 --> 00:15:20,790 Now, I want you to set the H1's CSS style 290 00:15:20,790 --> 00:15:23,280 to the one that you just copied over. 291 00:15:23,280 --> 00:15:26,013 Pause the video and do that right now. 292 00:15:27,720 --> 00:15:30,540 All right, so we need to target the H1, 293 00:15:30,540 --> 00:15:31,980 of which we've only got one, 294 00:15:31,980 --> 00:15:34,650 so we can use the element selector 295 00:15:34,650 --> 00:15:38,760 and then we paste in our CSS style as easy as that. 296 00:15:38,760 --> 00:15:40,710 And you'll notice immediately, 297 00:15:40,710 --> 00:15:45,710 that updates that font into our custom font from Google, 298 00:15:45,780 --> 00:15:47,790 and it doesn't matter what you've chosen, 299 00:15:47,790 --> 00:15:49,110 this should always work 300 00:15:49,110 --> 00:15:50,490 as long as you've included 301 00:15:50,490 --> 00:15:52,770 all of the links that are required 302 00:15:52,770 --> 00:15:56,250 and added in the relevant CSS. 303 00:15:56,250 --> 00:16:00,330 Also, on this page you'll see the different font families, 304 00:16:00,330 --> 00:16:03,690 for example, the Helvetica and the sans serf, 305 00:16:03,690 --> 00:16:05,790 or on a Windows, 306 00:16:05,790 --> 00:16:09,300 the default sans serif will be an Arial type font. 307 00:16:09,300 --> 00:16:12,030 And then you've got serif type fonts, 308 00:16:12,030 --> 00:16:15,180 which are the ones with the little feet that I mentioned. 309 00:16:15,180 --> 00:16:17,520 You've got these sans serif fonts, 310 00:16:17,520 --> 00:16:20,490 and you've got all of these other generics, 311 00:16:20,490 --> 00:16:23,910 such as cursive, monospace, and fantasy. 312 00:16:23,910 --> 00:16:25,890 Cursive is a little bit curly. 313 00:16:25,890 --> 00:16:27,270 That's how I remember it. 314 00:16:27,270 --> 00:16:30,960 Monospace has all the letters occupying the same width, 315 00:16:30,960 --> 00:16:34,050 so similar to a typewriter or code, 316 00:16:34,050 --> 00:16:36,300 and fantasy is usually something kind of wild. 317 00:16:36,300 --> 00:16:39,210 And these generic fonts will be different 318 00:16:39,210 --> 00:16:40,860 depending on the computer that you use 319 00:16:40,860 --> 00:16:42,330 and the browser that you use, 320 00:16:42,330 --> 00:16:43,200 so you might not see 321 00:16:43,200 --> 00:16:45,960 the same type of fonts that I have here, 322 00:16:45,960 --> 00:16:49,110 but if you specify a specific font 323 00:16:49,110 --> 00:16:51,180 and you make sure that it's linked to, 324 00:16:51,180 --> 00:16:52,890 then we should all be looking at 325 00:16:52,890 --> 00:16:55,203 the same font face right up here. 326 00:16:56,040 --> 00:16:59,070 And notice how when we copy that over, 327 00:16:59,070 --> 00:17:03,480 it specified the specific font, but also a backup font 328 00:17:03,480 --> 00:17:07,020 in case these links didn't work or something messed up 329 00:17:07,020 --> 00:17:10,079 and it would default to a cursive font. 330 00:17:10,079 --> 00:17:13,413 The generic cursive font would then look like this. 331 00:17:14,490 --> 00:17:16,560 So the final thing I wanna talk about 332 00:17:16,560 --> 00:17:21,210 in terms of text styling is alignment. 333 00:17:21,210 --> 00:17:22,980 So text alignment, 334 00:17:22,980 --> 00:17:25,290 and there's this property called text-align 335 00:17:25,290 --> 00:17:28,980 where you can set it to say centered, 336 00:17:28,980 --> 00:17:32,760 or you can set it to the left or to the right, 337 00:17:32,760 --> 00:17:37,110 and you've also got some values like start and end, 338 00:17:37,110 --> 00:17:40,260 and basically start is when you have text 339 00:17:40,260 --> 00:17:43,140 that maybe starts writing from the right to left, 340 00:17:43,140 --> 00:17:44,610 such as in Arabic. 341 00:17:44,610 --> 00:17:45,690 And so in this case, 342 00:17:45,690 --> 00:17:49,950 the start is actually here and the end is here. 343 00:17:49,950 --> 00:17:52,830 But then if you're working with Western text, 344 00:17:52,830 --> 00:17:55,260 then the start will be right here 345 00:17:55,260 --> 00:17:57,360 and the end will be right here. 346 00:17:57,360 --> 00:17:59,550 That's just a more flexible way 347 00:17:59,550 --> 00:18:02,160 of determining the text-align. 348 00:18:02,160 --> 00:18:05,073 But all in all, this is a pretty simple property, 349 00:18:06,469 --> 00:18:09,900 and you can take a look at it in the MDN docs 350 00:18:09,900 --> 00:18:13,590 to learn more about what the other values 351 00:18:13,590 --> 00:18:15,810 in addition to start/end are, 352 00:18:15,810 --> 00:18:19,530 and try the demo to see how they work. 353 00:18:19,530 --> 00:18:21,120 Now, once you've done all of that, 354 00:18:21,120 --> 00:18:23,820 I've got a final exercise for you, 355 00:18:23,820 --> 00:18:28,170 and that's located in the index.html here. 356 00:18:28,170 --> 00:18:31,440 There's a number of to-dos I want you to complete, 357 00:18:31,440 --> 00:18:36,330 and I want you to go through them one by one. 358 00:18:36,330 --> 00:18:38,250 It involves changing some colors, 359 00:18:38,250 --> 00:18:42,000 changing some font sizes, font weight, font family, 360 00:18:42,000 --> 00:18:47,000 the text align, and also changing a root element font size. 361 00:18:48,540 --> 00:18:50,640 The important thing is that you don't change 362 00:18:50,640 --> 00:18:53,220 any of the CSS that's already included, 363 00:18:53,220 --> 00:18:55,740 but instead write your CSS below 364 00:18:55,740 --> 00:18:58,650 in this internal style element 365 00:18:58,650 --> 00:19:01,020 so that you can quickly refer to the to-dos 366 00:19:01,020 --> 00:19:03,990 and see what you need to write in the CSS. 367 00:19:03,990 --> 00:19:06,840 Don't worry too much about setting external CSS. 368 00:19:06,840 --> 00:19:10,650 We're just completing this as a quick exercise. 369 00:19:10,650 --> 00:19:12,330 And remember, while you're doing this, 370 00:19:12,330 --> 00:19:14,910 if you wanna see what the end result should look like, 371 00:19:14,910 --> 00:19:19,590 go ahead into the goal.png to see all the colors and layout 372 00:19:19,590 --> 00:19:22,140 and relative sizes of everything. 373 00:19:22,140 --> 00:19:25,233 Pause the video now and go through each of these to-dos. 374 00:19:28,680 --> 00:19:31,320 All right, so let's go through the solution together. 375 00:19:31,320 --> 00:19:34,080 Now, step one was to change the color 376 00:19:34,080 --> 00:19:39,080 of this particular element to a named color called coral, 377 00:19:39,120 --> 00:19:42,051 and the solution should look something like this. 378 00:19:42,051 --> 00:19:46,020 The second one is to change the font size of this element 379 00:19:46,020 --> 00:19:49,500 to two times the size of the root element. 380 00:19:49,500 --> 00:19:52,680 Remember, to do that, we have to use the rem, 381 00:19:52,680 --> 00:19:56,790 and two times the size is two rem. 382 00:19:56,790 --> 00:19:59,970 I've selected it based on the size ID, 383 00:19:59,970 --> 00:20:01,983 and I've changed the font size to that. 384 00:20:03,300 --> 00:20:06,840 The next step, I've changed the font weight of this element 385 00:20:06,840 --> 00:20:11,048 to 900 by using the font weight property, 386 00:20:11,048 --> 00:20:14,880 and then we changed the font family of this element 387 00:20:14,880 --> 00:20:19,880 to use the Caveat font with a regular font weight. 388 00:20:20,010 --> 00:20:22,650 So I selected that font from there, 389 00:20:22,650 --> 00:20:26,310 and then I added in all the required links 390 00:20:26,310 --> 00:20:28,920 just before the end of the head section, 391 00:20:28,920 --> 00:20:31,140 but outside of the style section. 392 00:20:31,140 --> 00:20:34,230 This is very important in terms of placement. 393 00:20:34,230 --> 00:20:36,420 And then I added in the font family 394 00:20:36,420 --> 00:20:39,840 and a backup font in case it goes wrong. 395 00:20:39,840 --> 00:20:43,140 Next, I changed this particular paragraph element 396 00:20:43,140 --> 00:20:45,330 so that it's right aligned, 397 00:20:45,330 --> 00:20:49,320 and finally, I changed the root which is the HTML element, 398 00:20:49,320 --> 00:20:52,140 to have a 30 pixel font. 399 00:20:52,140 --> 00:20:56,160 And when that was changed, then the two rem one, 400 00:20:56,160 --> 00:20:59,400 which is the font size element here, 401 00:20:59,400 --> 00:21:00,900 actually changes with it. 402 00:21:00,900 --> 00:21:03,030 So it gets bigger or it gets smaller 403 00:21:03,030 --> 00:21:05,310 depending on the root size. 404 00:21:05,310 --> 00:21:08,430 So hopefully that was easy enough for you to complete 405 00:21:08,430 --> 00:21:10,410 and it tested you on all the things 406 00:21:10,410 --> 00:21:13,080 that we learned in this lesson so far. 407 00:21:13,080 --> 00:21:15,240 Once you're ready, head over to the next lesson, 408 00:21:15,240 --> 00:21:18,660 where we're gonna learn more about CSS inspection 409 00:21:18,660 --> 00:21:21,720 and how you can find out what is happening with your CSS 410 00:21:21,720 --> 00:21:23,910 using the Chrome developer tools. 411 00:21:23,910 --> 00:21:26,937 So for all of that and more, I'll see you there.