0:00
Hello and welcome to TutorialsPoint. In this video we will learn how to use CSS
0:05
to style our HTML elements. Now we are going to use our first CSS property. So
0:12
let me just remove this h2 tag for now and let's save it and the h2 tag is gone
0:19
We have this h1 that says hello earth. What we are going to do here, the
0:24
starting tag, the starting h1 tag, here I'm going to say something style
0:30
Alright style equals to and then double quotes. Now inside these double quotes
0:36
I'm going to write my first CSS property. Now observe that this hello earth is in
0:42
black color by default but I want to change its color to something else. Let's
0:47
say green. So what I'm going to do here, here style equals and then these quotes
0:52
inside these quotes I will write color and then a colon and inside the colon I
0:59
will specify the color. As you can see VS code is giving us suggestions of various colors but I want the color to be green so I will write green and then
1:08
a semicolon. Okay now once I hit save, ctrl s to save and as you can see hello
1:15
earth changes to green. So we have used our first CSS property. So this is one
1:23
of the way of inserting a CSS style into an HTML element that we just saw. We can
1:29
add multiple properties here. For example, just after the semicolon I can have some
1:35
other property. For example, I want the font style to be changed. So there is a
1:40
property called as font style. I'll write font style and as you can see
1:45
there is this option of font style. I'm going to quickly click on it and as you
1:51
can see font style and then a colon and then space with a semicolon. So I will
1:56
select italic. So I have written font size italic. Let me just extend it. Okay
2:02
so after the color green I have written font size italic. Now once I save this
2:08
see how the font style changes. I will save it and as you can see it has been
2:13
italicized now. So we can add multiple properties. Also just to let you guys
2:18
know here if you are coding along with me you can see that when you code in
2:24
long lines so a scroll bar basically appears. This scroll bar. What you can do
2:29
here is press alt Z and the scroll bar is grown and your long line basically
2:36
gets to the next line. So this is a quick shortcut that you need to know. So this
2:40
is one of the way of inserting CSS styles inside our HTML. Okay now this way
2:46
of adding CSS styles is called as inline styling. So let me just have a space here
2:55
and I'll write for you inline CSS and I'll comment this out so that you can
3:01
easily remember. So inline CSS is something when we directly add styling
3:06
into an HTML element. Okay that will be enough for this video. In the next video
3:13
we will see another way of using CSS called as internal CSS. So make sure to
3:18
subscribe to the channel hit that like button and I'll see you in the next video
