0:00
Hello and welcome to tutorial's point
0:02
In this video, we will learn how to use external CSS to style our HTML elements
0:08
Also, we will learn about the cascading order of the types of CSS we have used
0:13
So without wasting time, let's get started. Now, there are not only two ways to write CSS for our HTML files
0:21
In fact, there is a third way. The first way was inline CSS. Second was internal CSS
0:26
But now we have a third type. and that third type is called as external CSS
0:33
So right here, I'm still in my head tag, right? In my head element
0:38
So let me just comment it out. We don't need it. I'm just going to keep it for your reference
0:42
And now I save it. It goes back to the normal one. Right. Now, right in our head tag, what I'm going to do is I'm going to write another tag called as link
0:53
So here, I'm going to write a link tag. I'll write link
0:59
is a self closing tag and in the link there will be an attribute called as REL which basically means a relationship as you can see this attribute names a relationship of the link document to the current document
1:12
what are these basically these files are nothing but documents right index dot HTML is a document so real or relationship will be equal to style sheet
1:22
right so we are basically linking a style sheet so there is a link which has a relation of style sheet
1:29
All right, this will be the first and there will be a second attribute as well and this will be HREF
1:35
As you can see the HREF attribute specifies the URL of the linkered resource or basically the location of the linket resource
1:44
So HRF is going to be equal to name of the file
1:49
Now let us say the name of this file of this file basically is style
1:54
dot CSS. Now dot CSS basically represents that it is a cascading style sheet file
2:01
Now we have not created this file yet right. So I will click here on Explorer and here in chapter
2:08
one folder in the same folder as index create a new file and call it same as style so I write style and hit enter okay now go back to index dot HTML let just close this explorer now once we have written this I going to have a
2:29
comment here also and I will call this one external CSS all right I will save it nothing
2:37
will happen because we have not written any style for the new external CSS now I
2:42
will go to this style LISS so here is the style. CSS and we will repeat the same thing. What we are going to do is we have an
2:50
H1 element here that says hello YouTube. So back to style.ciss just what we did in internal
2:58
CSS we are going to do same in external as well. So in our external CSS what I'm going to
3:04
write is the name of the element we want to target. So we want to target H1 in our HTML
3:10
Okay and then curly braces. Now inside the curly braces we will
3:14
write the styles that we want. For example, this time I want the color to be
3:21
set to purple. And a semi-colon. Once I save this, as you can see
3:27
Hello YouTube changes to purple color. Let me zoom it as you can see
3:31
This is in purple color. We can add the same old styles
3:35
of font style. That can be italic. If I save it, it becomes italic
3:41
We can have font size. But let me just zoom it out first
3:44
I have zoomed in on the browser. Okay, so the font size, let it be equal to 50 pixels
3:51
Now we are going to talk about these units. What are these pixels exactly later on in the coming video
3:56
So don't worry about it. Just remember that it is a way of measuring font sizes
4:01
So for now, 50 pixels. Let me save it and as you can see, it becomes much bigger
4:07
So these were the three types of CSS stylings that we can apply to our HTML
4:13
with the first being inline CSS that you should just not use
4:17
You should use it very rarely. I will never recommend it. Second was the internal CSS
4:22
Yes, you can use it. And the third and the recommended one is external CSS
4:27
All right. Actually, both of these are recommended external as well as internal CSS and it depends on the situation
4:34
And the inline CSS is only recommended when there is a specific use case All right Now another question that comes into mind is what is the order of these different types of CSS stylings right
4:48
The internal external inline. What I mean to say is I have this H1 right here
4:54
If I give it a style, I write an inline style and I give it a color, let's say a color of blue
5:03
All right, I will save it. once I save it nothing happens alright it happened it changed to blue
5:08
so right we have a blue color but if we look at the external style
5:13
we have a purple color here let me remove it for now and let's just save it
5:18
I am going to remove this internal CSS as well I'm going to remove this external CSS as well
5:24
I'm going to remove these comments as well just notice here let me just remove these gaps
5:29
just notice we have a H1 and we have applied an inline style of color blue
5:34
to this hello YouTube H1 tag. And it changes to blue color
5:38
Fine. Now if what I do is I will have an internal CSS
5:45
So I will say style. And inside the style, I will target this H1 tag
5:50
and I will say change the color to white. Not white, let's say red
5:56
And when I save it, nothing happens. If I refresh the page, nothing happens
6:02
So we need to basically understand. understand what that the browser gives preference to inline CSS right so basically what i mean to say is let me write a comment here and let me write in line css has greater preferences than internal and external CSS as well all right so if you have in line csses and you also have internal csses and even if you have you have internal csses and even if you have you have
6:34
have some external CSS, the browser will give preference to this internal CSS as well
6:40
So I'm going to quickly write here the order of preferences. So the first preferences the
6:45
browser gives is to the inline styling or the inline CSS. Let me comment this out
6:52
All right Then the second one that it gives is going to be external and internal All right Now what do I mean by external and internal All right
7:05
So we already know that inline styling has the first preference. All right
7:10
So let me just remove it now. Let's save it and it goes back to original
7:15
Let me refresh it. And yeah, because I have targeted this H1. All right
7:19
Now, I have this internal CSS already here, H1. But now if I have an external CSS
7:25
as well. So here I'm going to have a link to external CSS and this will be style.ciss. Let me save it and let's go to style and I'm going to target this H1 again and I will give it a different color. Let's say a color of this blue violet. All right. Let me save it and it becomes blue violet. So you may say all right, it's fine. Basically external CSS is being preferred over internal CSS but that is not the actual case
7:55
The browser sees the order of hierarchy here. As you can see, first we have applied the internal CSS of color red here, so the color becomes red
8:05
But after that, we have used the link for external CSS. That is why the color became for the external CSS, that is blue-violet
8:15
Now let us say I will cut this out and I will paste this just above this internal CSS
8:21
I'm going to paste it here. Now watch as I save this
8:25
going to change to red why because first the browser will lead read this line it says an external
8:32
style is there which says the color should be blue violet so the new color for this hello
8:37
youtube will be blue violet but then the browser will read the next line that is this internal
8:42
CSS and it will see that the color has been reassigned to red for this h1 so it will change the
8:49
color to red so this was a bit about the ordering of different types of
8:55
of styles in CSS. That will be enough for this video. In the next video, we will learn about more CSS properties like text align, font size, width and text decoration
9:06
Also, we will learn how to write comments in CSS. So make sure to subscribe to the channel, hit that like button and I'll see you in the next video
