Session let us learn how the block elements and inline elements are getting added in HTML page with CSS effect. Let us also learn how to show or hide an element using visibility and display property. And also we will play a little bit development. Let me start now the first thing is about the block and inline elements. This paragraph do h1 all the heading tags are these commander block elements. They take up the full width of the container span spa an anchor pack these are inline elements they take up only I mean, they take up only till the content part.

Let us add few CSS styling to these elements and see the effect created an HTML page with few tags h1 p though you will. These are block elements That is they take up the whole width of the container and span an anchor these two are inline elements, they take only the width till the content takes me until the content part how to see the real effect. Let me try to add background colors to all these elements. I mean I am going to add for H one comma do comma you will let me add background color. I'm just doing it for alternate tags green next what paragraph span and p comma span comma let me add the background color of orange let me save this let me run this okay now I have got the output. Let me just minimize this how the sketch one part drop below and you will they take up the whole width of the container span and this anchor tags they take up only till the content with why they want to change the width of the other tags I need to explicitly specify the width and the height.

So, in this case I want to change the width and the height of each block elements. So, I can just specify directly they will come on h one comma p for all these I can give width and height with colon hundred pixels. Height colon hundred pixels. Now, let me save this and refresh. You can see the vector change 200 pixels now, okay for this I have not given the scale it takes the whole width of the container. So, this is how you have to play around when you're working with CSS.

You have to understand what are the block elements and inline And accordingly you have to apply the styling. Now, let us move on to the next part. Let us see the difference between visibility and display. These two are actually properties they have paid off show one element. Let me add the coding and then I will explain you how does the coding part I've got three paragraphs that planter can display and three paragraph tags to understand this ability. First, let me run this right click open in browser.

Okay, you can see the output so let me just scroll it down just Alright, we'll come on the spot already we have learned about this inline and block element so I'm just commenting it right click open and Rosa. Okay now I have got the first one. Hello, why not displayed Allah was the second one hello world not this display hello world. No change in the output. I have not used any property. First let me go in first display property.

I'm just going to use display colon, man. Okay, let me just go to the browser and I will refresh it. Refresh. If you see here the complete paragraph tag is hidden from the container. When you use display colon none that paragraph tag is totally taken out from the container and the other tags are pushed, other elements are pushed up. Now let us see the effects.

What are disability, I'm going into the second paragraph tag and here for this let me just give visibility as hidden. In case of this latest Mac in case of disability it is either show or hide that is the meaning. Now, let me save this and I will refresh here you can see this is taking the space in case of display the smart taking Give me space. In case our facility is just taking the space of the container. If you go into ecommerce site that you will be seen a button on click of the button the item will be shown. Sometimes site an item can be hidden.

Depending upon the user's requirement they show or hide the element. The same thing can be achieved with the help of CSS. Of course, they may use CSS or they can go in for library JavaScript libraries like jQuery. The idea over here is when you use display none this element is totally hidden from the mean. From the container, the element will not take any space let's drop the elements are pushed up in the container. When you show visibility then that element is taking up space it is still available as of now it is hidden.

So in this scenario, when you go in when you're going for the split not if you don't want the axiom that you have a shopping cart with a non stop item if you are removing a particular items from that particular cart. Each should be displayed none. So I don't want that space to be kept open, I am totally removing it from a cart. So in the container also, I don't want that element to take up space. But when it comes to visibility, then I have an item, which will be sure our users request the user wants to see see the item zoom in and see the item. In that case, that particular element is taking up space.

As of now it is hidden. If the user is clicking of the button to show the element. When you click Show, that product will be shown. When you click Hide the product will be hidden. So it still takes up the space in the container. So this is the difference between display and hidden property, which helps to show or hide an element.

Next, let us play around with development. With this you can create shapes, you can create rectangles, squares, if you specify a border radius, you can convert the square into a circle all these are possible with a div tag. Let me show you build style equal to you need to specify the background color a background color. Then with Hi. Okay, you don't have to specify anything inside the div the div container is empty do with this you can create shapes. Now I have added this.

Let me run this. You can see that a rectangle is being created you can specify the border radius as I told you, if you've specified a border radius, you will get a circle like kind of a ball. in CSS. There are a few more methods available like anime, with the help of which you can do animation with simple HTML and CSS as well. Create the tab, I have created a flag. Let me show you the output.

This is a flag which is created with the help of three div tags. The top one is a do tab with specific height and width with background color orange, the bottom with background color green. The middle one is having this chakra image in the center, you can try to solve how to create a flag with basic facts about the use of block and inline elements, how to apply CSS for them. And what is the difference between visibility and display property of CSS and how to use a drill tap to create a simple flat that's what we have. See. I am not showing you anyhow you have to try it out.

Thank you