1
00:00:00,570 --> 00:00:06,450
In this video we're going to pick up where we left off talking about four more font and text related

2
00:00:06,450 --> 00:00:07,760
properties.

3
00:00:07,760 --> 00:00:10,020
The first of which is called font weight.

4
00:00:10,580 --> 00:00:18,300
And so the weight of a font refers to how bold or light weight the text is basically how thick the actual

5
00:00:18,300 --> 00:00:20,470
font or how thick the lines are.

6
00:00:20,820 --> 00:00:23,110
So I'll give you an example here.

7
00:00:23,250 --> 00:00:27,550
We'll select all paragraphs and all say font weight.

8
00:00:28,620 --> 00:00:29,410
Bold.

9
00:00:29,490 --> 00:00:32,860
And so this is one of the options we can say Fontanne weight is bold.

10
00:00:32,920 --> 00:00:39,880
And then I'm going to go to this file and refresh and you'll see that the paragraph becomes bolded.

11
00:00:40,920 --> 00:00:46,170
Likewise you can go back and I can change you back to normal or you could just delete all of this but

12
00:00:46,170 --> 00:00:50,810
if I change it back to normal and now goes back to the normal font size.

13
00:00:50,820 --> 00:00:57,210
One thing I'll point out is that certain fonts will let you use a numeric value as well and that ranges

14
00:00:57,210 --> 00:00:59,190
from 100 to 800

15
00:01:02,310 --> 00:01:05,470
and it's not any number between 100 and 800 It's every hundred.

16
00:01:05,490 --> 00:01:09,930
So one two three four five hundred six hundred seven hundred and eight hundred.

17
00:01:09,930 --> 00:01:12,530
So that depends on the font itself if you have that.

18
00:01:12,540 --> 00:01:14,050
So it looks something like this.

19
00:01:14,170 --> 00:01:20,270
That would be the lightest and this would be pretty heavy and this would be the heaviest.

20
00:01:20,490 --> 00:01:25,640
So we'll see how to use that actually in the next lesson when we talk about Google fonts.

21
00:01:26,070 --> 00:01:28,070
So changes back to bold for now.

22
00:01:28,770 --> 00:01:31,460
So line height does exactly what it sounds like it does.

23
00:01:31,470 --> 00:01:33,770
It controls the height of a given line.

24
00:01:33,810 --> 00:01:38,190
So if we go back to our browser here we take a look at these paragraphs.

25
00:01:38,190 --> 00:01:40,080
Notice the line spacing here.

26
00:01:40,170 --> 00:01:43,370
How much space there is between this line and the next.

27
00:01:43,500 --> 00:01:49,110
And if you've ever had to change line spacing in something like Microsoft Word before you say turned

28
00:01:49,110 --> 00:01:56,280
in a paper in high school or college and then needed to be 1.5 or 2 point line spacing we can do the

29
00:01:56,280 --> 00:02:04,560
exact same thing with CCS SS So its line height let's select the paragraph line height and then we just

30
00:02:04,560 --> 00:02:05,300
give it a number.

31
00:02:05,340 --> 00:02:10,890
And this will multiply the current line height which is always determined by the font itself.

32
00:02:11,120 --> 00:02:13,450
We have a larger font.

33
00:02:13,950 --> 00:02:16,770
We're going to have a larger space between lines.

34
00:02:17,100 --> 00:02:24,510
So let's refresh and now we get double spacing so we can you know multiply that by 5.

35
00:02:24,570 --> 00:02:29,900
Usually you don't do much with line height aside from maybe one point five or two.

36
00:02:30,340 --> 00:02:30,630
OK.

37
00:02:30,630 --> 00:02:31,290
So that's the line.

38
00:02:31,300 --> 00:02:32,860
I go back to two.

39
00:02:32,910 --> 00:02:34,720
Well it's two one point five.

40
00:02:34,770 --> 00:02:37,070
The next one is text the line.

41
00:02:37,080 --> 00:02:44,580
So just like Microsoft Word or any word processor text the line controls how the text of a given element

42
00:02:44,640 --> 00:02:45,750
is actually aligned.

43
00:02:45,780 --> 00:02:48,610
If it's to the left to the right or to the center.

44
00:02:49,110 --> 00:02:53,790
So let's take our H-1 to start and center.

45
00:02:54,150 --> 00:03:01,720
So if we inspect it you'll see that the H-1 takes up this entire length of the screen.

46
00:03:01,950 --> 00:03:04,500
But the text itself is only on the left side.

47
00:03:04,680 --> 00:03:10,040
So if we use text line we can say text align right and we'll move all the way to the right side.

48
00:03:10,200 --> 00:03:13,320
And if we do text align center will move to the center.

49
00:03:13,920 --> 00:03:15,280
So let's start.

50
00:03:15,930 --> 00:03:22,250
So what's the H-1 and less do text the line right.

51
00:03:22,520 --> 00:03:29,940
Save refresh and you can see that each one is now in line to the right and we can do the same thing

52
00:03:30,180 --> 00:03:31,550
two paragraphs.

53
00:03:31,560 --> 00:03:38,840
But let's text align Center them so text align center save her fresh.

54
00:03:39,280 --> 00:03:48,720
And it's a small shift but you can see that now our paragraphs are aligned center rather than left.

55
00:03:48,780 --> 00:03:55,530
So one last property is text decoration and text decoration is used to give text and underline effect

56
00:03:55,770 --> 00:04:02,250
or a strikethrough and also something called an over line which is just underlined except on top.

57
00:04:02,370 --> 00:04:07,460
So let's give all paragraphs a underline effect.

58
00:04:07,830 --> 00:04:17,640
So we just do text decoration underline and we refresh and we get a lot of underlined text and we can

59
00:04:17,640 --> 00:04:20,790
do the same thing for H-1 and we'll do straight through

60
00:04:26,760 --> 00:04:28,570
line through.

61
00:04:29,730 --> 00:04:30,510
And there we go.

62
00:04:30,510 --> 00:04:32,130
We get this line through.

63
00:04:32,640 --> 00:04:39,720
OK so that's the basics of font and text based properties and C Ss we're going to now in the next video

64
00:04:39,930 --> 00:04:42,030
actually talked about including custom fonts