WEBVTT 0 00:00.510 --> 00:00.840 All right. 1 00:00.840 --> 00:02.490 So how did that go? 2 00:02.640 --> 00:06.430 Well, the first thing that we wanted to change was the font color. 3 00:06.480 --> 00:08.450 And we've actually looked at this before. 4 00:08.460 --> 00:14.580 But if you don't remember it's always a good idea to head over to Google and simply say font color CSS. 5 00:14.610 --> 00:19.770 And if you prefer MDN or W3 Schools, then just enter that as well. 6 00:19.830 --> 00:26.520 And the first thing we get is the color property which sets the foreground color value of an element 7 00:26.640 --> 00:27.770 text content. 8 00:28.050 --> 00:30.030 So that is pretty much what we want. 9 00:30.030 --> 00:30.350 Right? 10 00:30.360 --> 00:35.750 And we can set it using this particular rule using the hex code that I provided. 11 00:35.760 --> 00:39.450 So let's head over to Atom and inside our h1. 12 00:39.690 --> 00:52.500 Let's set the color property to that hex code which was 66BFBF, and we wanted to do the same for 13 00:52.560 --> 01:04.100 our h2, and for our h3 we wanted the color property to be set as 11999E. 14 01:04.730 --> 01:12.320 So now let's hit save and we can already see the previews of our colors, which is roughly what I expected. 15 01:12.320 --> 01:18.530 So now if we head back to our web site, hit refresh, our web site is starting to look very very nice. 16 01:18.950 --> 01:23.830 And we've styled some of our titles to the colors that we were looking for. 17 01:24.080 --> 01:27.690 So the next one we were looking for was the font weight. 18 01:27.740 --> 01:31.910 So let's search for that and see what we get. 19 01:31.910 --> 01:37.610 All right. So we've actually got a property called the fint weight, and you can see there's a whole bunch 20 01:37.610 --> 01:40.060 of ways that you can specify the weight, 21 01:40.160 --> 01:45.100 for example, the keyword values or the actual numeric values. 22 01:45.110 --> 01:51.650 So in our case we actually wanted the keyword ‘normal’ simply, in order to get rid of this bolting here, 23 01:52.010 --> 01:55.110 and to de-emphasize this subtitle. 24 01:55.550 --> 02:03.590 So let's head over to the h2, and let's go ahead and add our font weight over here. 25 02:04.190 --> 02:07.940 And we want to set it to normal. So, hit save. 26 02:08.150 --> 02:09.420 Hit refresh. 27 02:09.620 --> 02:10.390 And there we go. 28 02:10.400 --> 02:16.310 Now it's a little bit lighter in its weight and it looks just a little bit more together. 29 02:16.430 --> 02:24.320 And we've gotten rid of that pre-specified font weight which was determined by our browser where it set 30 02:24.320 --> 02:25.830 it to bold. 31 02:25.850 --> 02:29.260 So now the next one is the line height. 32 02:29.270 --> 02:34.850 So let's go ahead and set our line height for our h1 over here. 33 02:34.850 --> 02:39.740 So line height, we can specify it using a number. 34 02:39.950 --> 02:44.810 So 1 would be the default and 2 would be double height. 35 02:44.810 --> 02:51.080 Now, the important thing to remember about line height is that the preferred way of specifying line height 36 02:51.230 --> 02:54.800 is to give a single value without any units. 37 02:54.830 --> 02:57.310 And in our case we're going to change it to 2. 38 02:57.500 --> 03:00.710 So let's hit save and let's see what that looks like. 39 03:00.860 --> 03:06.610 So that will increase the space between whatever is on top of the text of the h1 here 40 03:06.650 --> 03:09.000 and whatever is below it. Now 41 03:09.070 --> 03:12.320 in my case I don't actually really like the way that looks. 42 03:12.320 --> 03:17.270 But if this more spaced out look is what you like then feel free to keep it this way. 43 03:17.270 --> 03:22.980 But I'm actually going to get rid of this after we've shown exactly how it works. 44 03:23.090 --> 03:26.030 Now our web site is coming along really nicely. 45 03:26.030 --> 03:32.180 And feel free to tweak around the layout or the positioning of any of the elements that you see on 46 03:32.180 --> 03:36.260 our front page here and make it look the way that you want it to. 47 03:36.410 --> 03:42.860 Now in the next lesson we're going to learn about the final positioning system which is floating. 48 03:43.130 --> 03:51.130 And we're going to use what we learn in order to position our Skills blocks to make it look much nicer 49 03:51.140 --> 03:52.760 than the way it looks right now. 50 03:52.970 --> 03:56.530 So for all of that and more I'll see you on the next lesson.