Today we are going to discuss about the display. So, what is the display or suppose I'm going to come in this as you know we have two types of displays, block level elements and inline elements there is a block level elements First of all, h1 h2, h3, h4, h5, h6, also the block level elements, paragraphs forms had a footer section. So these are the block level elements. And what are the inline elements for school span, anchor image, these are the inline elements. So if I'm saying that I have h1, and I have as to as to when I'm saying one, and now I'm saying go to your page, refresh the page you have two types of h1 and h2 make sure these are the block level elements That's why it's showing as to it's showing bottom of the s one. So now I'm saying, how can you override the rule?

For suppose if I'm saying this play hit the f1 principles, I'm saying f1 am think display online, go to your page, refresh the page. fine if I'm saying h1 and has to refresh the page now, as you can see, you are showing the h1 and h2 in the same line. So you can change the rule. Or you can change the block level element to any inline element. And you can also change the inline element your block level for support if you have a div. Now, I'm saying I have a day I'm seeing the birthdays, for suppose hundred pixel, and I'm seeing the height is also hundred pixel.

And I'm saying the background color, background color is red, go to your page, refresh the page. Okay, the page Oh, okay. So 100 pixel and pixel width. So this is 100% height, refresh the page. So now as you can see, this is 100% verse, verse and the hundred percent height. So as you know, you have the div.

So div is a block level element. So that's why it's showing below the h1 and h2. So if you want to use the inline for support, I'm saying also add the property display. Highlight the page so you can see it's trying you Because aliens so that's why it's not working. But we can change the nature of the element as well possible if you have a paragraph if you have a span and you have another span Okay, I'm saying this is one is plan. I'm saying this is second is go to your page, refresh the page.

Now as you can see, it's showing it in the same line. Why? Because a span is that inline element four suppose I'm saying it's time because this is the element selector. I'm saying it is played. Now I'm saying clock refresh the page. Latin, it's not black, it's blocked, refresh the page.

And as you can see, you have just changed the nature of the span. First of all, if you have more than one anchors anchor address I'm saying on Ctrl D Ctrl D Ctrl D for school if you have three anchors in the same line why because anchor has a nature and line so you can also use I'm saying expand and I refresh the page now as you can see, it's showing us the block level element. So you can change the display of a particular element possible if you are using the display none property for suppose I'm saying display none properly. That means I'm saying just hide the content is plain and go to your channel. As you can see you have your h1 and h2 refresh the page. Now as you can see we have just just removed the property Okay.

So now you have just removed you have not removed as you can see you have one and two at the same audition but you are not showing the Ashwin is to hear but if you want to say that you don't need to possible if you're using display, visibility, visibility and hidden. Now, go to your page refresh the page now as you can see that the space is same, they are required. As you can see this is a one this is two. So this is one this is actually the they are consuming the same space if you are using the visibility hitting and if you are using the display name property that means you are saying Just hide the content from the page. So in this way you can use the display property. So I think this is enough for winner in the next lecture we are going to cover some other topics.

So then go ahead