1
00:00:10,060 --> 00:00:17,290
This is where we left in the previous video by implementing the internal or the embedded way of linking

2
00:00:17,320 --> 00:00:18,190
CSS.

3
00:00:18,580 --> 00:00:24,940
In this video we are going to use the external that is the most recommended one.

4
00:00:25,180 --> 00:00:33,700
So I'm going to copy this and I'm going to rename this one to external.

5
00:00:35,680 --> 00:00:44,410
And for the external, I'm going to remove the style here because we are going to use different approach.

6
00:00:44,890 --> 00:00:51,070
I'm going to open this and it has opened here as that.

7
00:00:51,520 --> 00:00:57,540
Now how are we going to implement the external as we have spoke about?

8
00:00:57,550 --> 00:01:02,200
For this one, we are going to create a specific file for it.

9
00:01:02,470 --> 00:01:13,480
So we can create a folder called CSS and inside we are going to add the file or we can directly create

10
00:01:13,480 --> 00:01:21,180
the file at the same root of this file because this is a small project without having the restructuring.

11
00:01:21,190 --> 00:01:27,350
So let me right click and I'm going to name this one as Styles dot CSS.

12
00:01:27,370 --> 00:01:36,020
The extension is CSS because we are going to write CSS, so I'll hit enter the name here is up to you.

13
00:01:36,050 --> 00:01:40,850
You can use any name of your choice, but it must be descriptive.

14
00:01:41,000 --> 00:01:45,220
So now these two files are independent.

15
00:01:45,230 --> 00:01:46,840
They don't know each other.

16
00:01:46,850 --> 00:01:48,950
So how are we going to link?

17
00:01:49,220 --> 00:01:54,680
So on this file we are going to write the CSS that we want to write.

18
00:01:54,890 --> 00:02:03,590
First of all, we are going to target the H1 as before, which is this and the same property names.

19
00:02:03,590 --> 00:02:09,169
I'm going to use color as blue after saving it.

20
00:02:09,169 --> 00:02:16,130
As you can see, there is no effect because these two files are not related.

21
00:02:16,130 --> 00:02:17,830
They are independent.

22
00:02:17,840 --> 00:02:27,380
So how are we going to link up back to the HTML over here inside the head tag, we are going to add

23
00:02:27,560 --> 00:02:32,870
a property or attribute called link and it goes like this.

24
00:02:32,900 --> 00:02:39,620
We have URL, which is the relationship, which is stylesheet meaning CSS.

25
00:02:39,740 --> 00:02:48,500
Then the href meaning that at which file or which folder or which path that we can locate the CSS file

26
00:02:48,770 --> 00:02:57,170
and since the CSS file and then the HTML are at the same level, we are going to use forward slash as

27
00:02:57,170 --> 00:03:01,180
that and then we have the CSS after saving it.

28
00:03:01,190 --> 00:03:08,140
Now, as you can see, it has been applied and I can go ahead and select the P tag.

29
00:03:08,150 --> 00:03:17,960
So down here I will say P and color as the blue violet and then the font size.

30
00:03:17,960 --> 00:03:20,810
This time around, I will say 30 pixels.

31
00:03:21,110 --> 00:03:24,220
Now we have the same effect.

32
00:03:24,230 --> 00:03:31,940
So as you can see all these three methods we have the internal, which is this, and then we have the

33
00:03:31,940 --> 00:03:35,740
internal, which is this, and we have the external.

34
00:03:35,740 --> 00:03:41,590
So like we spoke about, this is the most recommended one because for this we have some separation of

35
00:03:41,590 --> 00:03:42,370
concern.

36
00:03:42,400 --> 00:03:48,820
We are not bloating or messing up with the CSS with the actual HTML code.

37
00:03:48,820 --> 00:03:53,410
So in larger applications, this approach is what we use.

38
00:03:53,440 --> 00:03:55,420
Let's continue in the next video.