0:00
Hello and welcome to Tutorials Point
0:02
In this video, we will learn about CSS properties like text align, font size
0:07
width, text decoration and much more. We will also learn how to write comments in CSS
0:13
So without wasting time, let's get started. So we can actually have multiple things
0:17
So here we can have a paragraph. And in the paragraph, I will write some random letters
0:23
So we have some random letters. Let me just save it and we have a paragraph as well
0:28
We can have multiple things. right we can have a link that refers to some website like our very own website
0:36
tutorials point dot com i just zoomed it out let me zoom in back something like this
0:42
and then we can say tutorials point let me save it and then we let me just have some space for
0:52
our website we can zoom out just press control minus and it will zoom out the way is good now let's go
0:58
to styles and let's target these H1, this paragraph tag as well as this link tag or A tag
1:04
Now for the H1 as you can see it is red color. Why? Because I told you the internal CSS is being preferred
1:11
So let me just remove it We are going to use external CSS because it is much preferred but you can always use between the three So let me just save it and the color is this one Next we can have multiple styles For example another thing is for this H1
1:28
I want it to be aligned to the center of the webpage
1:32
For that, there is a property called as text align and I'll write center
1:37
When I save it, as you can see, Hello YouTube is in the center of our web page
1:42
Similarly, let us target our paragraph. So I'll write P, which stands for paragraph and then curly braces
1:49
Inside the curly braces, we can have multiple properties. For example, I would like to change the font size
1:55
Let me zoom in. I would like to change the font size for this and let's make it 30 pixels
2:02
Once I save it, as you can see, the paragraph becomes huge because it's 30 pixels
2:08
We can also do multiple things. We can say text align. Let me just zoom in back
2:15
say text align and the text align let it be justify and when I click save as you can see the text
2:22
will be justified something like this there are multiple things we can change the width of this
2:28
element as well for example let's say the width should be only 10 pixels when I save it as
2:34
you can see it basically changes the width to 10 pixels don worry if you didn understand what this is we will talk about it later on what width is all about So let me just delete this one and we are back to normal Similarly we can target another element For example this link So A tag is the link right Now here we can have multiple things Now A tag by default have this blue color They have this cursor of pointer what we call in CSS and they have this underline as well But I just want to remove this styling So what will I do
3:07
is I will write, let's say, the color of this should be black
3:13
Once I save it, as you can see, the color is black
3:17
Next, I want to say the font size should be 20 pixels
3:22
So the font size is 20 pixels. Next, for the links, we know that there is this underline by default
3:29
We want to remove it and to remove it, there is a property. That is called a text decoration
3:36
And we will set this text. decoration to none. And when I save it, as you can see, the underline is gone. But the link is still
3:43
working. If I click on it, it will take me to tutorials point website. All right? Let's go back
3:52
So this was a bit about CSS on how we can target different elements. As you can see, we first
3:58
wrote the name of the element that is H1 and then in the curly basis we specify the properties This is the property and this is the value And note the property and value together is called a declaration
4:11
So each of these lines can be called as a CSS declaration
4:17
Also, I would like to emphasize how we can use comments in CSS
4:21
For example, I'll write a simple comment. I will say this is external
4:28
CSS. If you press control slash, as you can see, it changes it into a comment
4:35
So a comment is made by a slash, then a star sign, then you write whatever you
4:41
want, then you close it with a star and a slash sign
4:45
For example, here I'm going to write slash and then a star sign and then
4:50
I will write this is the style declaration for P tag
5:01
And to close this comment, I'll write star and a slash. Something like this
5:06
If I save it, nothing happens. That will be enough for this video
5:10
In the next video, we will learn about CSS selectors. So make sure to subscribe to the channel, hit that like button, and I will see you in the next video
