1
00:00:00,510 --> 00:00:01,410
Welcome back.

2
00:00:01,440 --> 00:00:06,930
Before we finish off this section, I wanted to show you one last thing, and that is up until this

3
00:00:06,930 --> 00:00:09,720
point, we've used pixels quite a lot.

4
00:00:10,020 --> 00:00:13,270
But there's two other options that we can actually use.

5
00:00:13,650 --> 00:00:17,460
So let's remove our box models for now.

6
00:00:19,200 --> 00:00:24,960
And instead, let's create some paragraphs, so using our long shorthand.

7
00:00:26,660 --> 00:00:33,740
And let's close this off, perfect, let's say that we also wanted to have another paragraph that says

8
00:00:34,160 --> 00:00:35,300
introduction.

9
00:00:36,690 --> 00:00:37,920
Save and refresh.

10
00:00:39,030 --> 00:00:45,420
And there you go, we have our paragraph now, if we wanted to add some class to this paragraph, we

11
00:00:45,420 --> 00:00:49,050
can just go in here and we don't need the box model so we can delete that.

12
00:00:49,740 --> 00:00:56,160
We can do something like P and let's do font size and font size.

13
00:00:56,160 --> 00:00:59,900
I've shown you that we can do percentages, but you can also do pixels.

14
00:00:59,900 --> 00:01:05,350
So let's do 20 pixels, save and refresh and we have pixels.

15
00:01:05,890 --> 00:01:10,860
OK, so let's say I want lorem Epsom to be a little bit bigger.

16
00:01:10,890 --> 00:01:12,570
Can use spane.

17
00:01:13,910 --> 00:01:17,040
Again, that's kind of like the tag that you've seen before.

18
00:01:17,060 --> 00:01:19,140
It's just good for inline.

19
00:01:19,760 --> 00:01:26,600
So again, this way we can add styles, so I save that, go to styles, and now we can select spane

20
00:01:28,190 --> 00:01:30,290
and we can do something like this.

21
00:01:30,290 --> 00:01:33,500
We can do font size.

22
00:01:35,300 --> 00:01:36,250
Five year.

23
00:01:37,640 --> 00:01:46,880
I refresh, so what it's saying is we want the font size to be equal to five times the containing element,

24
00:01:47,060 --> 00:01:51,890
which is 20 pixels, because if you remember where inside of a P tag.

25
00:01:53,060 --> 00:01:59,600
Just to show you that that is right, if I do one hundred pixels and save and refresh, it's the same.

26
00:02:01,570 --> 00:02:11,440
So Emmas is kind of nice because if I do something like two ETM and refresh, well, if I change this

27
00:02:11,440 --> 00:02:19,540
to 10 pixels and I refresh, this always stays relative to the one.

28
00:02:19,540 --> 00:02:20,980
Other one I want to show you is.

29
00:02:21,250 --> 00:02:22,410
Ah, yeah.

30
00:02:23,050 --> 00:02:27,790
And that is the size in relation to the size of the root element.

31
00:02:27,820 --> 00:02:29,080
What is the root element.

32
00:02:29,560 --> 00:02:37,600
Well it's the HTML, so whatever the document is, it's always going to be twice as big.

33
00:02:37,610 --> 00:02:40,750
So if I do five refresh, that's great.

34
00:02:40,750 --> 00:02:43,600
But if I change the font size over here to five.

35
00:02:44,530 --> 00:02:46,950
That won't be affected at all.

36
00:02:48,060 --> 00:02:50,430
Good job getting this far in the course.

37
00:02:50,580 --> 00:02:53,760
I know I've thrown a lot of properties and selectors are you?

38
00:02:53,760 --> 00:02:58,320
But I promise in the next section we're going to start building some real websites and have fun with

39
00:02:58,320 --> 00:03:01,500
all this knowledge can wait see in the next one.

40
00:03:01,800 --> 00:03:02,190
Bye bye.