1
00:00:00,510 --> 00:00:00,840
All right.

2
00:00:00,840 --> 00:00:02,490
So how did that go?

3
00:00:02,640 --> 00:00:06,430
Well, the first thing that we wanted to change was the font color.

4
00:00:06,480 --> 00:00:08,450
And we've actually looked at this before.

5
00:00:08,460 --> 00: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.

6
00:00:14,610 --> 00:00:19,770
And if you prefer MDN or W3 Schools, then just enter that as well.

7
00:00:19,830 --> 00:00:26,520
And the first thing we get is the color property which sets the foreground color value of an element

8
00:00:26,640 --> 00:00:27,770
text content.

9
00:00:28,050 --> 00:00:30,030
So that is pretty much what we want.

10
00:00:30,030 --> 00:00:30,350
Right?

11
00:00:30,360 --> 00:00:35,750
And we can set it using this particular rule using the hex code that I provided.

12
00:00:35,760 --> 00:00:39,450
So let's head over to Atom and inside our h1.

13
00:00:39,690 --> 00:00:52,500
Let's set the color property to that hex code which was 66BFBF, and we wanted to do the same for

14
00:00:52,560 --> 00:01:04,100
our h2, and for our h3 we wanted the color property to be set as 11999E.

15
00:01:04,730 --> 00: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.

16
00:01:12,320 --> 00: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.

17
00:01:18,950 --> 00:01:23,830
And we've styled some of our titles to the colors that we were looking for.

18
00:01:24,080 --> 00:01:27,690
So the next one we were looking for was the font weight.

19
00:01:27,740 --> 00:01:31,910
So let's search for that and see what we get.

20
00:01:31,910 --> 00: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

21
00:01:37,610 --> 00:01:40,060
of ways that you can specify the weight,

22
00:01:40,160 --> 00:01:45,100
for example, the keyword values or the actual numeric values.

23
00:01:45,110 --> 00:01:51,650
So in our case we actually wanted the keyword ‘normal’ simply, in order to get rid of this bolting here, 

24
00:01:52,010 --> 00:01:55,110
and to de-emphasize this subtitle.

25
00:01:55,550 --> 00:02:03,590
So let's head over to the h2, and let's go ahead and add our font weight over here.

26
00:02:04,190 --> 00:02:07,940
And we want to set it to normal. So, hit save.

27
00:02:08,150 --> 00:02:09,420
Hit refresh.

28
00:02:09,620 --> 00:02:10,390
And there we go.

29
00:02:10,400 --> 00:02:16,310
Now it's a little bit lighter in its weight and it looks just a little bit more together.

30
00:02:16,430 --> 00:02:24,320
And we've gotten rid of that pre-specified font weight which was determined by our browser where it set

31
00:02:24,320 --> 00:02:25,830
it to bold.

32
00:02:25,850 --> 00:02:29,260
So now the next one is the line height.

33
00:02:29,270 --> 00:02:34,850
So let's go ahead and set our line height for our h1 over here.

34
00:02:34,850 --> 00:02:39,740
So line height, we can specify it using a number.

35
00:02:39,950 --> 00:02:44,810
So 1 would be the default and 2 would be double height.

36
00:02:44,810 --> 00:02:51,080
Now, the important thing to remember about line height is that the preferred way of specifying line height

37
00:02:51,230 --> 00:02:54,800
is to give a single value without any units.

38
00:02:54,830 --> 00:02:57,310
And in our case we're going to change it to 2.

39
00:02:57,500 --> 00:03:00,710
So let's hit save and let's see what that looks like.

40
00:03:00,860 --> 00:03:06,610
So that will increase the space between whatever is on top of the text of the h1 here

41
00:03:06,650 --> 00:03:09,000
and whatever is below it. Now

42
00:03:09,070 --> 00:03:12,320
in my case I don't actually really like the way that looks.

43
00:03:12,320 --> 00:03:17,270
But if this more spaced out look is what you like then feel free to keep it this way.

44
00:03:17,270 --> 00:03:22,980
But I'm actually going to get rid of this after we've shown exactly how it works.

45
00:03:23,090 --> 00:03:26,030
Now our web site is coming along really nicely.

46
00:03:26,030 --> 00:03:32,180
And feel free to tweak around the layout or the positioning of any of the elements that you see on

47
00:03:32,180 --> 00:03:36,260
our front page here and make it look the way that you want it to.

48
00:03:36,410 --> 00:03:42,860
Now in the next lesson we're going to learn about the final positioning system which is floating.

49
00:03:43,130 --> 00: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

50
00:03:51,140 --> 00:03:52,760
than the way it looks right now.

51
00:03:52,970 --> 00:03:56,530
So for all of that and more I'll see you on the next lesson.