1 00:00:00,240 --> 00:00:01,260 In this video. 2 00:00:01,260 --> 00:00:09,750 Let's talk about one of the properties of a box model or box that is width and height of a box. 3 00:00:09,960 --> 00:00:15,670 So the width and height properties are used to set the size of a box. 4 00:00:15,690 --> 00:00:24,240 The weight property defines the horizontal size of the box, the horizontal size of the box that is 5 00:00:24,240 --> 00:00:25,860 from left to right. 6 00:00:26,590 --> 00:00:34,320 While the height property defines the vertical size from top to bottom, it's by vertical size. 7 00:00:34,330 --> 00:00:38,360 So how can we control such elements using CCIS? 8 00:00:38,380 --> 00:00:39,820 So let's get back to code. 9 00:00:41,450 --> 00:00:43,730 So let me close the deaf to here. 10 00:00:44,420 --> 00:00:51,680 And this one we have played here well before we can apply height and weight to. 11 00:00:53,000 --> 00:00:54,440 In the element. 12 00:00:55,060 --> 00:00:56,360 Take note about this. 13 00:00:57,020 --> 00:01:08,330 Not all element can be changed using the width and height property with the exception of block level 14 00:01:08,330 --> 00:01:14,930 elements, meaning elements that make new line work. 15 00:01:14,960 --> 00:01:19,850 It takes the available space as much as it can and always a new line. 16 00:01:19,940 --> 00:01:26,300 And remember from base of Matrix, talk about block level element, for example, this particular I 17 00:01:26,330 --> 00:01:29,360 mean, h one is a block level element. 18 00:01:29,570 --> 00:01:31,110 Span is not. 19 00:01:31,130 --> 00:01:36,200 So for this h one, we can control the width of this h one. 20 00:01:36,620 --> 00:01:38,300 So let's see that for this h one. 21 00:01:38,300 --> 00:01:41,030 I want the way to be around here. 22 00:01:43,580 --> 00:01:45,680 That, so how can we do it? 23 00:01:45,700 --> 00:01:54,790 So coming back to our case here, I can add weight and here you provide a value with a unit. 24 00:01:55,150 --> 00:01:57,060 And we'll talk about unit very soon. 25 00:01:57,070 --> 00:02:01,480 Talk about how pace those percentages and M and RIM. 26 00:02:01,480 --> 00:02:04,420 For the meantime, let's stick to pesos. 27 00:02:04,460 --> 00:02:08,110 So let's say it's supposed to be $20 if I save it. 28 00:02:08,139 --> 00:02:08,830 You see that? 29 00:02:08,830 --> 00:02:12,970 Now, the weight of this particular text is $20. 30 00:02:13,540 --> 00:02:16,690 To prove to you that is $20 less, inspect it. 31 00:02:16,690 --> 00:02:19,600 Right click and click on Inspect. 32 00:02:20,730 --> 00:02:26,460 Then when I click on this selector and click on the H one here, if I click on that and now it's that 33 00:02:26,640 --> 00:02:32,070 for my main course here, this one, my main the name of my file is main. 34 00:02:32,070 --> 00:02:34,380 Which is, which is this one. 35 00:02:35,300 --> 00:02:37,200 The name of my file windowsills. 36 00:02:37,220 --> 00:02:45,830 And that's why I have it here, as makes me say that I have a weight of what, $20 so I can control 37 00:02:45,830 --> 00:02:47,890 the weight of this particular element. 38 00:02:47,900 --> 00:02:51,740 So let's say that is too small for my likeness, the weight I can give it. 39 00:02:51,770 --> 00:02:54,470 Let's add some background color to be more clear here. 40 00:02:54,500 --> 00:03:01,640 Let's say the background color is, let's say red, but let's change the color to whites. 41 00:03:01,670 --> 00:03:04,250 The color on that to be white. 42 00:03:04,280 --> 00:03:10,740 We see that we have this here because the texture and the background, we because this what you call 43 00:03:10,740 --> 00:03:12,880 the $20 here, it's too small. 44 00:03:12,890 --> 00:03:15,880 So we can increase it by ten episodes. 45 00:03:15,890 --> 00:03:17,800 And now this look better. 46 00:03:17,810 --> 00:03:20,640 See how we are controlling the element. 47 00:03:20,660 --> 00:03:26,370 So one point is that not all elements that can be affected by width and height properly. 48 00:03:26,390 --> 00:03:29,240 So let me add a high property to this particular element. 49 00:03:29,240 --> 00:03:31,750 So the height is a very concise right. 50 00:03:31,760 --> 00:03:34,730 Let's go to the, let's say $90. 51 00:03:35,360 --> 00:03:37,730 You see, that is too small, let's say. 52 00:03:38,590 --> 00:03:39,800 $900. 53 00:03:39,880 --> 00:03:41,690 And now it's bigger than before. 54 00:03:41,710 --> 00:03:43,600 Let's say let me get at $50. 55 00:03:44,500 --> 00:03:44,870 I see. 56 00:03:44,890 --> 00:03:45,400 Small. 57 00:03:45,550 --> 00:03:48,460 Let me say the one $20. 58 00:03:49,120 --> 00:03:50,980 Let's say $30. 59 00:03:51,640 --> 00:03:52,210 We see that, too. 60 00:03:52,480 --> 00:03:55,200 I think two 5256. 61 00:03:55,430 --> 00:03:55,800 Yeah. 62 00:03:55,810 --> 00:03:56,840 Oh, $200. 63 00:03:57,130 --> 00:03:57,610 Okay. 64 00:03:57,700 --> 00:03:58,270 Yeah. 65 00:03:58,840 --> 00:04:03,730 You see how you are controlling the, the, the width of the, the width and height of this one. 66 00:04:03,730 --> 00:04:08,580 So like I said, not all elements can have this property, for example, span. 67 00:04:08,590 --> 00:04:12,700 So here, let's add some span element here, let's act. 68 00:04:12,700 --> 00:04:20,930 This is pan and let's see a span here if I save it, see? 69 00:04:20,950 --> 00:04:22,000 Let me show you here. 70 00:04:22,029 --> 00:04:24,100 I have done here I this pan. 71 00:04:24,100 --> 00:04:31,330 So here I won't select this pan span and let's see the background color of it. 72 00:04:31,330 --> 00:04:33,490 Let's make it as green. 73 00:04:34,120 --> 00:04:35,560 Now, I have green here. 74 00:04:36,350 --> 00:04:37,850 Let me change the color on it. 75 00:04:37,940 --> 00:04:42,080 The color on it, too, let's say white or yellow. 76 00:04:43,190 --> 00:04:48,660 Now I want to increase the width of this particular span element. 77 00:04:48,680 --> 00:04:49,640 Is it possible? 78 00:04:49,910 --> 00:04:50,890 Okay, have a look. 79 00:04:50,900 --> 00:04:54,770 When I say width of, let's say 200 x. 80 00:04:56,230 --> 00:04:57,970 We see no change. 81 00:04:58,840 --> 00:05:03,730 That would be if I add height to it, let's say 700. 82 00:05:04,480 --> 00:05:12,400 Well, it has to be that the behavior of in line element, block level element takes width and height 83 00:05:12,910 --> 00:05:15,520 that I take away in this video, the next video. 84 00:05:15,550 --> 00:05:17,650 Let's talk about pattern properties.