1 00:00:00,660 --> 00:00:07,010 Hello and welcome to this speed you on seeing this display property. 2 00:00:07,230 --> 00:00:16,020 The cso Display property is used to define or specify how an element should be displayed. 3 00:00:16,410 --> 00:00:27,770 Every dish timal element is displayed by default either in line or as a block element. 4 00:00:27,810 --> 00:00:38,380 I have got my sample web page on the lower right hand my site hastier moral code on the left. 5 00:00:38,510 --> 00:00:40,110 I've got a style tag. 6 00:00:40,140 --> 00:00:43,420 I have not applied any styling yet. 7 00:00:43,560 --> 00:00:48,310 I just wanna explain what a block and inline element is. 8 00:00:48,330 --> 00:00:55,710 Every hastier muhl element by default is displayed either in block or in line. 9 00:00:55,860 --> 00:01:05,220 So I give an example a block element a block level element always starts on a new line and takes up 10 00:01:05,370 --> 00:01:12,000 as much space as possible so he stretches out as far as I can. 11 00:01:13,260 --> 00:01:23,590 I saw examples of block level element includes the haystack's like Page 1 2 8 6. 12 00:01:23,590 --> 00:01:26,070 They are all block level element. 13 00:01:26,200 --> 00:01:35,630 All saw the paragraph tag is a block level element because by default is displayed on a separate line 14 00:01:35,700 --> 00:01:45,630 or blog level elements or we start on is a new line and it will take up as much space as possible. 15 00:01:45,640 --> 00:01:48,070 It stretches as far as it can. 16 00:01:48,070 --> 00:01:57,550 Are there examples of block level elements including these are block level paragraph tags forms headers 17 00:01:57,550 --> 00:02:03,210 footers Sitchin and so on goes up or block level elements. 18 00:02:03,220 --> 00:02:05,940 They always start on a new line. 19 00:02:06,190 --> 00:02:16,420 On the other hand in line element in line elements I in line elements does not start on a new line and 20 00:02:16,540 --> 00:02:19,450 takes up very little space. 21 00:02:19,450 --> 00:02:24,360 An example of an inline element is an image. 22 00:02:24,850 --> 00:02:32,930 So when images are displayed they are displayed in line and they take up very minimal space. 23 00:02:32,950 --> 00:02:35,070 So I'll show you an example. 24 00:02:35,120 --> 00:02:43,470 So these are the images so by default when images load they appear in line. 25 00:02:43,540 --> 00:02:51,040 As you can see this image is here despite the fact that if you look in the code they are written underneath 26 00:02:51,070 --> 00:02:51,990 each other. 27 00:02:52,210 --> 00:02:53,700 So this is a quote for the image. 28 00:02:53,710 --> 00:02:59,590 If you notice the two loop comes first and then the jellyfish and then the pain queen. 29 00:02:59,860 --> 00:03:10,660 But when they are displayed they are displayed in lying in a horizontal way while they see that they 30 00:03:10,660 --> 00:03:18,220 are displayed in horizontal way while the hitch one tag This is a huge one tack. 31 00:03:18,340 --> 00:03:22,510 This is the paragraph tack they are displayed in a separate line. 32 00:03:22,510 --> 00:03:24,050 Look at this one here. 33 00:03:24,190 --> 00:03:25,220 This. 34 00:03:25,710 --> 00:03:34,490 And if you look at the paragraph tag there is this bear. 35 00:03:34,530 --> 00:03:35,560 See you got. 36 00:03:35,810 --> 00:03:44,320 Hey contact and then it's vegetables here is a paragraph I've put a back background just behind b. 37 00:03:44,450 --> 00:03:49,130 Hey Twan tanksley can see saw with the block level element. 38 00:03:49,140 --> 00:03:57,700 They will try and stretch as far as they can and well be in line alignment test to take up minimal space 39 00:03:57,790 --> 00:03:58,690 as possible. 40 00:03:58,850 --> 00:04:05,770 But they are all stuck up in line so these images are by default an online element. 41 00:04:06,110 --> 00:04:08,350 Hey everyone tags tag. 42 00:04:08,380 --> 00:04:12,860 That is how each one took its six tags are block level elements. 43 00:04:13,030 --> 00:04:15,220 Paragraph block level element. 44 00:04:15,370 --> 00:04:24,220 Anything that starts on a new line of block level the display property the CSF split property is used 45 00:04:24,220 --> 00:04:29,430 to change the default display of an element. 46 00:04:29,620 --> 00:04:35,380 So for example the default display for the images is in line. 47 00:04:35,460 --> 00:04:39,770 More we can use the display property to change that. 48 00:04:39,830 --> 00:04:48,460 There are two popular values that are used with the display property block and in line. 49 00:04:48,610 --> 00:04:51,490 So I want to display this images in block. 50 00:04:51,580 --> 00:04:54,840 By default they are displayed in line. 51 00:04:54,850 --> 00:04:59,650 So if I do that then you see what it look like. 52 00:05:00,700 --> 00:05:07,050 So if I if I run this code now the images will now be displayed in block. 53 00:05:07,220 --> 00:05:09,570 That is in a vertical way. 54 00:05:09,700 --> 00:05:10,690 You see that. 55 00:05:10,900 --> 00:05:18,940 So I've used the display property to change the display default display behaviour all of the images 56 00:05:19,870 --> 00:05:21,220 in this video. 57 00:05:21,250 --> 00:05:32,140 We experimented with the display property the display property is used to change the default display 58 00:05:32,800 --> 00:05:36,640 behaviour off and his team marked element. 59 00:05:36,640 --> 00:05:46,150 There are two main values you can use with the display property so you can use to display in line or 60 00:05:46,270 --> 00:05:47,190 block. 61 00:05:47,410 --> 00:05:55,660 We went through an example where we changed did default display of an image that by default is displayed 62 00:05:55,660 --> 00:05:56,470 in line. 63 00:05:56,560 --> 00:06:04,870 We used to display property to change the display to block when something is this blade in block. 64 00:06:04,990 --> 00:06:12,210 It is vertical when something is displayed in line is displayed horizontally. 65 00:06:13,760 --> 00:06:25,430 So an example of an in line element by default are images and an example of a blog elemen by default 66 00:06:25,780 --> 00:06:27,660 are head in tags. 67 00:06:27,890 --> 00:06:30,420 Paragraphs and DVDs. 68 00:06:30,680 --> 00:06:32,670 Thank you so much for watching. 69 00:06:32,990 --> 00:06:42,500 This feat you know you've had some insight in to how to use the display of property to change the default 70 00:06:42,530 --> 00:06:45,310 display of an element. 71 00:06:45,500 --> 00:06:47,570 Thank you so much for watching. 72 00:06:47,590 --> 00:06:48,690 Bye for now.