1 00:00:01,090 --> 00:00:02,950 And welcome in this video. 2 00:00:02,970 --> 00:00:16,080 I will be introducing you to Siss this plea property says this play property specifies how an element 3 00:00:16,200 --> 00:00:24,930 is displayed displaying property can be used to control the layout. 4 00:00:25,950 --> 00:00:38,360 Every hastier male element has a default display of value depending on what type of element it is. 5 00:00:38,370 --> 00:00:52,500 The default display value for most elements is either block or in line up our block level element a 6 00:00:52,500 --> 00:01:00,470 block level element or you start on a new line and takes up. 7 00:01:00,560 --> 00:01:12,300 OK buys the form with available so a block level element will stretch out to the left and the right 8 00:01:12,660 --> 00:01:14,500 as far as it can. 9 00:01:17,250 --> 00:01:28,450 Paragraph element or the P element is an example of a block level element So it occupies the kintyre 10 00:01:28,510 --> 00:01:35,200 with available and it will stretch out far to the left and to the right. 11 00:01:35,280 --> 00:01:47,220 As far as it can example block elements can't do it physically is deficient. 12 00:01:47,320 --> 00:01:55,740 He web page when you section out a part of a web page that is known as the deeps div is a block level 13 00:01:55,800 --> 00:01:56,800 element. 14 00:01:57,230 --> 00:01:59,550 Hey 1 2 page 6. 15 00:01:59,630 --> 00:02:09,610 Also a block level element and the paragraph we have already covered is also a block level element. 16 00:02:09,610 --> 00:02:17,260 What is an in line level element be in line and amount is different from the block level. 17 00:02:17,280 --> 00:02:30,270 In that with an Like element it does not start on a new line and it only occupies as much with as necessary 18 00:02:30,300 --> 00:02:38,400 so it will only tick up the with it needs an example of an in line element is the core element which 19 00:02:38,400 --> 00:02:45,060 you need to add a link to a web page only to be required space. 20 00:02:45,150 --> 00:02:54,220 Need other example of a line element apart from the uncle element is the image element which is it. 21 00:02:54,220 --> 00:03:02,260 I m g element and B is the element you need to add an image to a web page. 22 00:03:02,400 --> 00:03:09,580 So by default it is an in line level element. 23 00:03:09,580 --> 00:03:21,660 So I've got my image here on my page which by default is an online element so the method of this plea 24 00:03:21,660 --> 00:03:22,820 is in line. 25 00:03:23,100 --> 00:03:29,420 So if I want to for example send to this image I will have to do two things. 26 00:03:29,430 --> 00:03:38,990 I will have to set the API the margin of the image to probably give it a margin of zero and on full. 27 00:03:39,170 --> 00:03:48,600 And how also change the display behaviour from in a line which is the default changes to block so that 28 00:03:48,690 --> 00:03:50,670 it displays it in block. 29 00:03:50,670 --> 00:03:57,780 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 30 00:03:57,790 --> 00:04:04,320 I'll just tab down here and type in the name of the elements. 31 00:04:04,320 --> 00:04:07,050 We put the selector in G. 32 00:04:07,210 --> 00:04:17,940 I do my curly braces and separate the curly braces and in between the culbreth is this way I would define 33 00:04:17,940 --> 00:04:20,980 my success rule s said display 34 00:04:23,750 --> 00:04:24,960 display of the image. 35 00:04:24,990 --> 00:04:36,180 I want it to be BLOCK So the default is in line but I'm changing it to block Okay moving the same block 36 00:04:36,840 --> 00:04:45,220 and I want to change a margin and then give the margin to values. 37 00:04:45,480 --> 00:04:58,170 The value is going to be zero and the second value I am going to make it to you can see I misplaced 38 00:04:58,200 --> 00:05:04,060 my SEMICON on this an and you can see if sent had the image. 39 00:05:04,380 --> 00:05:13,030 So when you have margin and you specify the value the first value here goes to the top and the bottom. 40 00:05:13,080 --> 00:05:16,930 Second values go to the left and the right. 41 00:05:17,160 --> 00:05:29,630 So just by changing the display property to block and the margin have been able to centre the image. 42 00:05:29,650 --> 00:05:37,670 If I just drag that along you can see you can see images is now centred using this here says properties. 43 00:05:37,770 --> 00:05:41,490 I have just applied in this video. 44 00:05:41,490 --> 00:05:53,070 I introduced you to the CSF display property and also illustrated how to use the display property before 45 00:05:53,070 --> 00:05:54,500 I wrap up this video. 46 00:05:54,500 --> 00:05:59,580 I just want to comment out this text here. 47 00:05:59,580 --> 00:06:03,890 So you're free to play around with any of this element here. 48 00:06:03,890 --> 00:06:06,630 Just play around with this here says If you want to make changes. 49 00:06:06,630 --> 00:06:08,210 Feel free to do so. 50 00:06:08,280 --> 00:06:14,570 Some want to go into my index so his tier mail and comment this out. 51 00:06:14,740 --> 00:06:21,310 Again comments are useful you can use them to hide things because the browser will not display them. 52 00:06:21,310 --> 00:06:24,300 The browser will ignore any where there's a comment. 53 00:06:24,610 --> 00:06:30,180 So I'm just going to look for where that paragraph is. 54 00:06:30,210 --> 00:06:31,410 It is here. 55 00:06:31,700 --> 00:06:37,300 So what I'm going to do I'm just going to add a comment hastier email comment. 56 00:06:37,720 --> 00:06:40,360 So you do that with the leston sign. 57 00:06:40,660 --> 00:06:53,230 Exclamation mark to the two dashes and how close it here are. 58 00:06:53,340 --> 00:07:00,360 And that should take care of this five just save that you can see. 59 00:07:00,360 --> 00:07:07,530 Now that has disappeared and this image here has taken up that space and jumped up a bit. 60 00:07:07,570 --> 00:07:12,570 So let me just expand that here for it. 61 00:07:12,910 --> 00:07:21,170 So if I want late I can reposition this or if I want to add another text I can go back there and at 62 00:07:21,280 --> 00:07:24,920 this you know how to do that now. 63 00:07:25,030 --> 00:07:29,630 So it's very important to be able to try different things. 64 00:07:29,680 --> 00:07:35,770 You can comment certain aspects out of your code if you don't want them to display it so that you can 65 00:07:35,770 --> 00:07:37,240 see how the page looks. 66 00:07:37,540 --> 00:07:45,580 Without that and you decide the one the item again just remove the comment the text or whatever element 67 00:07:45,640 --> 00:07:47,460 will now display. 68 00:07:47,980 --> 00:07:49,180 Thanks for watching. 69 00:07:49,180 --> 00:07:49,710 Bye for now.