Hello and welcome to this speed you on seeing this display property.
The cso Display property is used to define or specify how an element should be displayed.
Every dish timal element is displayed by default either in line or as a block element.
I have got my sample web page on the lower right hand my site hastier moral code on the left.
I've got a style tag.
I have not applied any styling yet.
I just wanna explain what a block and inline element is.
Every hastier muhl element by default is displayed either in block or in line.
So I give an example a block element a block level element always starts on a new line and takes up
as much space as possible so he stretches out as far as I can.
I saw examples of block level element includes the haystack's like Page 1 2 8 6.
They are all block level element.
All saw the paragraph tag is a block level element because by default is displayed on a separate line
or blog level elements or we start on is a new line and it will take up as much space as possible.
It stretches as far as it can.
Are there examples of block level elements including these are block level paragraph tags forms headers
footers Sitchin and so on goes up or block level elements.
They always start on a new line.
On the other hand in line element in line elements I in line elements does not start on a new line and
takes up very little space.
An example of an inline element is an image.
So when images are displayed they are displayed in line and they take up very minimal space.
So I'll show you an example.
So these are the images so by default when images load they appear in line.
As you can see this image is here despite the fact that if you look in the code they are written underneath
each other.
So this is a quote for the image.
If you notice the two loop comes first and then the jellyfish and then the pain queen.
But when they are displayed they are displayed in lying in a horizontal way while they see that they
are displayed in horizontal way while the hitch one tag This is a huge one tack.
This is the paragraph tack they are displayed in a separate line.
Look at this one here.
This.
And if you look at the paragraph tag there is this bear.
See you got.
Hey contact and then it's vegetables here is a paragraph I've put a back background just behind b.
Hey Twan tanksley can see saw with the block level element.
They will try and stretch as far as they can and well be in line alignment test to take up minimal space
as possible.
But they are all stuck up in line so these images are by default an online element.
Hey everyone tags tag.
That is how each one took its six tags are block level elements.
Paragraph block level element.
Anything that starts on a new line of block level the display property the CSF split property is used
to change the default display of an element.
So for example the default display for the images is in line.
More we can use the display property to change that.
There are two popular values that are used with the display property block and in line.
So I want to display this images in block.
By default they are displayed in line.
So if I do that then you see what it look like.
So if I if I run this code now the images will now be displayed in block.
That is in a vertical way.
You see that.
So I've used the display property to change the display default display behaviour all of the images
in this video.
We experimented with the display property the display property is used to change the default display
behaviour off and his team marked element.
There are two main values you can use with the display property so you can use to display in line or
block.
We went through an example where we changed did default display of an image that by default is displayed
in line.
We used to display property to change the display to block when something is this blade in block.
It is vertical when something is displayed in line is displayed horizontally.
So an example of an in line element by default are images and an example of a blog elemen by default
are head in tags.
Paragraphs and DVDs.
Thank you so much for watching.
This feat you know you've had some insight in to how to use the display of property to change the default
display of an element.
Thank you so much for watching.
Bye for now.