0:00
Hello and welcome to tutorial's point
0:02
In this video, we will learn how to reset default CSS and we will learn about the display property
0:09
So without wasting time, let's get started. So I have already opened VS code and here in the Explorer, you can see I have created a new folder called as Chapter 4
0:18
And inside Chapter 4 I have created two files, index.html, which is this one
0:22
And then we have a style.cassus, which is this one. All right. So let me close the Explorer
0:26
Now here in index.html, I'm going to link the R CSS file quickly
0:34
So I'll just have a shortcut link, colon and then write CSS and hit enter and the file
0:39
automatically gets linked. Now let me save it and nothing will happen because we have no predefined styles
0:45
Now I'm going to talk about one thing here before we talk about the CSS display
0:49
All right. And that is if we open developer tools and how do we open, we either right click and then click
0:55
on inspect or we just press. Control Shift I on Google Chrome and the developer tools pop up for us
1:01
Now one thing to note here is since we have no styles defined, by default, some styles are
1:07
already here. If we click here and we hover over the element as you can see it already has some as you can see font sizes there It already has some height and width the 751 and 37 right
1:20
So if you look at the box, as you can see, some height and width is already given
1:25
And as you can see, the body already has some predefined styling. That is already there, the marginate pixel
1:30
So we don't want, we just want to get rid of this. So the basic thing here is that we are going to target our entire HTML document
1:38
using the star that we have talked about in the earlier videos. And here we can simply write the margin set to zero and save it
1:46
And as you can see, we have no gaps now here. Absolutely amazing, right? Now for purposes that all our elements are displayed properly
1:53
the padding should be always set to zero first. And also, as I told you in the last video
1:58
the box sizing preferred is broader box. So from now on, we will be using for all our CSS and HTML videos
2:07
we will be using the box. sizing border box. So it is a good, it is generally a good rule basically to have all of your
2:14
style sheets filled with these three properties for your entire HTML document. Now let's talk about
2:21
the CSS display property I have written an H1 tag here that says CSS display right Okay so what I going to do is I going to write something or I have already a heading element here Right Next what I going to do is I going to write a paragraph element or not maybe a paragraph but a link element or a tag that is called that has some link
2:42
Let's say our very own tutorials. Okay, I cannot remember the spelling of my own
2:52
that's crazy and let's say click what's wrong with my typing click here if you save it
3:00
as you can see we have a we have a heading H1 and we have a link
3:04
right first of all let's just have some separation between them so what I'm going to do is
3:09
for our H1 I'm going to give it a margin bottom of 20 pixels so that they are separated
3:15
actually it should be more let's say 100 pixels and as you can see now one thing
3:20
to note here is Now, right after our H1, if I introduce another heading, let's say H2, this is another heading
3:29
If I save it, it appears right here. Now, why this appears
3:33
It's because of the margin. Let me just remove the margin for now. Let me just remove it quickly
3:39
And as you can see just after the first heading the second heading appears in the next line Okay So by this rule we can say that if after a link I insert another link let say A
3:51
or let me just copy paste this one, copy and paste, it should appear right after it on the next line
3:58
But when I save it, it appears side by side. Let me zoom it in
4:02
As you can see, headings appear on different lines. But why do links appear on same lines
4:08
What is the reason? The reason is because of the display properties of CSS
4:14
All right, if we right click and inspect, go to our developer tools and we just hover over something like this
4:22
Okay. Now, if we go here, you will see that for the heading tags, the user agent style sheet, that is the pre-default style, is display block
4:33
It says display block. What do we mean by display block? By display block means that this H1 tag, if we hover over it, it takes the entire row
4:44
Exactly right up to this end corner, it takes the entire row
4:49
Similarly, this heading also takes the entire row. But if we hover on any link, something like this, as you can see for the link, the display is not going to be..
