This is where we left in the previous video by implementing the internal or the embedded way of linking
CSS.
In this video we are going to use the external that is the most recommended one.
So I'm going to copy this and I'm going to rename this one to external.
And for the external, I'm going to remove the style here because we are going to use different approach.
I'm going to open this and it has opened here as that.
Now how are we going to implement the external as we have spoke about?
For this one, we are going to create a specific file for it.
So we can create a folder called CSS and inside we are going to add the file or we can directly create
the file at the same root of this file because this is a small project without having the restructuring.
So let me right click and I'm going to name this one as Styles dot CSS.
The extension is CSS because we are going to write CSS, so I'll hit enter the name here is up to you.
You can use any name of your choice, but it must be descriptive.
So now these two files are independent.
They don't know each other.
So how are we going to link?
So on this file we are going to write the CSS that we want to write.
First of all, we are going to target the H1 as before, which is this and the same property names.
I'm going to use color as blue after saving it.
As you can see, there is no effect because these two files are not related.
They are independent.
So how are we going to link up back to the HTML over here inside the head tag, we are going to add
a property or attribute called link and it goes like this.
We have URL, which is the relationship, which is stylesheet meaning CSS.
Then the href meaning that at which file or which folder or which path that we can locate the CSS file
and since the CSS file and then the HTML are at the same level, we are going to use forward slash as
that and then we have the CSS after saving it.
Now, as you can see, it has been applied and I can go ahead and select the P tag.
So down here I will say P and color as the blue violet and then the font size.
This time around, I will say 30 pixels.
Now we have the same effect.
So as you can see all these three methods we have the internal, which is this, and then we have the
internal, which is this, and we have the external.
So like we spoke about, this is the most recommended one because for this we have some separation of
concern.
We are not bloating or messing up with the CSS with the actual HTML code.
So in larger applications, this approach is what we use.
Let's continue in the next video.