And welcome in this video.
I will be introducing you to Siss this plea property says this play property specifies how an element
is displayed displaying property can be used to control the layout.
Every hastier male element has a default display of value depending on what type of element it is.
The default display value for most elements is either block or in line up our block level element a
block level element or you start on a new line and takes up.
OK buys the form with available so a block level element will stretch out to the left and the right
as far as it can.
Paragraph element or the P element is an example of a block level element So it occupies the kintyre
with available and it will stretch out far to the left and to the right.
As far as it can example block elements can't do it physically is deficient.
He web page when you section out a part of a web page that is known as the deeps div is a block level
element.
Hey 1 2 page 6.
Also a block level element and the paragraph we have already covered is also a block level element.
What is an in line level element be in line and amount is different from the block level.
In that with an Like element it does not start on a new line and it only occupies as much with as necessary
so it will only tick up the with it needs an example of an in line element is the core element which
you need to add a link to a web page only to be required space.
Need other example of a line element apart from the uncle element is the image element which is it.
I m g element and B is the element you need to add an image to a web page.
So by default it is an in line level element.
So I've got my image here on my page which by default is an online element so the method of this plea
is in line.
So if I want to for example send to this image I will have to do two things.
I will have to set the API the margin of the image to probably give it a margin of zero and on full.
And how also change the display behaviour from in a line which is the default changes to block so that
it displays it in block.
So let me show you how I would do that so this is my CFS just need to create some space on my face so
I'll just tab down here and type in the name of the elements.
We put the selector in G.
I do my curly braces and separate the curly braces and in between the culbreth is this way I would define
my success rule s said display
display of the image.
I want it to be BLOCK So the default is in line but I'm changing it to block Okay moving the same block
and I want to change a margin and then give the margin to values.
The value is going to be zero and the second value I am going to make it to you can see I misplaced
my SEMICON on this an and you can see if sent had the image.
So when you have margin and you specify the value the first value here goes to the top and the bottom.
Second values go to the left and the right.
So just by changing the display property to block and the margin have been able to centre the image.
If I just drag that along you can see you can see images is now centred using this here says properties.
I have just applied in this video.
I introduced you to the CSF display property and also illustrated how to use the display property before
I wrap up this video.
I just want to comment out this text here.
So you're free to play around with any of this element here.
Just play around with this here says If you want to make changes.
Feel free to do so.
Some want to go into my index so his tier mail and comment this out.
Again comments are useful you can use them to hide things because the browser will not display them.
The browser will ignore any where there's a comment.
So I'm just going to look for where that paragraph is.
It is here.
So what I'm going to do I'm just going to add a comment hastier email comment.
So you do that with the leston sign.
Exclamation mark to the two dashes and how close it here are.
And that should take care of this five just save that you can see.
Now that has disappeared and this image here has taken up that space and jumped up a bit.
So let me just expand that here for it.
So if I want late I can reposition this or if I want to add another text I can go back there and at
this you know how to do that now.
So it's very important to be able to try different things.
You can comment certain aspects out of your code if you don't want them to display it so that you can
see how the page looks.
Without that and you decide the one the item again just remove the comment the text or whatever element
will now display.
Thanks for watching.
Bye for now.