0:00
Hello and welcome to Daryl's Point
0:03
In this video we will learn how to use internal CSS to style our HTML elements
0:09
So this is one of the way to style our HTML elements called inline CSS
0:15
There are many other ways that we are going to talk about. Now the drawback of this way of inserting CSS into our HTML is that it makes our code look messy
0:26
There are only two properties here as you can see but what if we could add
0:30
more properties that we can here easily, but that will make our code look more messy and it will be
0:35
difficult to debug in case a bug comes. So it is not really recommended to use inline CSS. So let me just
0:44
delete it or what I'm going to do is let me just keep it and comment it out for you so that
0:50
you can use it later on Now let me write another H1 tag again and let say hello YouTube All right and save it And as you can see the hello YouTube is here and hello Earth is gone because I just commented it out Now the second way of inserting CSS into our HTML is called as internal CSS
1:12
So to insert internal CSS for our HTML, what you are going to do is inside your head tag, right
1:19
This is your head tag. Now inside this head tag right after the title, I am going to insert a new tag
1:26
I will call this style. So I will write the opening style and I will write the closing style tag as well
1:35
Okay. Now inside this style we can also write CSS code for our HTML
1:41
Now let us understand how can we write internal CSS. We have this H1 tag and we want to change its color, let us see. Okay
1:50
Now inside our style tag, what I'm going to do is I'm going to write the name of the tag that we want
1:56
to target So we want to target H1 So I will write here H1 Alright And then I will write curly braces And then I will separate these curly braces
2:07
Now inside these curly braces I am going to write whatever styling I want to be applied on this H1 Hello YouTube tag
2:14
All right. So as I said, I want its color to be changed to red because YouTube is red
2:21
So let me just save it. And as you can see, hello YouTube turns to color
2:27
red. Now we can add multiple styles here. For example earlier just like we wrote font style
2:33
let's write it here again font style and let us set it to italic and if I save it as you can see
2:40
our font is italicized. We can also add multiple things multiple styles basically. For example
2:46
another style property for a text based element can be font size. So I will write font
2:52
size and for this font size let me just say 30 pixels
2:57
and if I save it as you can see there is a little bit of change if you were able to see if you want to see it more clearly let have a bigger size Let say 50 pixels And when I save it as you can see the font becomes bigger It 50 pixels
3:12
So this is another way to insert CSS for our HTML. And let me write down it for you
3:18
This way is called internal CSS and let me comment it out so that you can easily remember
3:24
this. So the first way we learned was inline CSS where we
3:28
directly write the style attribute for the particular element. And the second way is internal CSS
3:36
where we specify the styles for all the elements of our HTML inside the head tag
3:43
All right. That will be enough for this video. In the next video, we will see another way of using CSS called as external CSS
3:52
So make sure to subscribe to the channel, hit that like button, and I will see you in the next video
