1 00:00:01,000 --> 00:00:02,050 In this video. 2 00:00:02,050 --> 00:00:07,130 Let's talk about one of the properties of a box model called Border. 3 00:00:07,150 --> 00:00:08,470 So let's get started. 4 00:00:08,500 --> 00:00:09,940 What is border property? 5 00:00:09,970 --> 00:00:11,380 Well, what a property is. 6 00:00:11,380 --> 00:00:14,110 I used to draw lines around boxes. 7 00:00:14,290 --> 00:00:16,510 So in order to further store them, we see. 8 00:00:16,690 --> 00:00:22,930 So let's say that where I have this particular text, which is a box, I want to have some lines around 9 00:00:22,930 --> 00:00:23,500 it. 10 00:00:23,710 --> 00:00:26,740 I'm going to use what is called border. 11 00:00:26,770 --> 00:00:36,040 Let's say I want to add a line at the top here or left here or right here, or I can change the colors 12 00:00:36,040 --> 00:00:37,870 of this one the way I want it. 13 00:00:37,900 --> 00:00:40,060 So let's see with demonstration. 14 00:00:40,540 --> 00:00:45,700 So let me add one more h one. 15 00:00:45,870 --> 00:00:47,290 Well, let me add. 16 00:00:47,290 --> 00:00:48,260 Not each one is a mirror. 17 00:00:48,290 --> 00:00:48,760 Let me add. 18 00:00:48,760 --> 00:00:52,180 Let's say P, for example, have P here. 19 00:00:52,450 --> 00:00:57,100 But well, having talked about selector, so let's stick with this one. 20 00:00:57,100 --> 00:00:58,510 Let me add one more here. 21 00:00:58,510 --> 00:01:00,070 Equal as H. 22 00:01:00,190 --> 00:01:02,650 So let me call this one as border example. 23 00:01:03,310 --> 00:01:10,360 Border example here and now in there I can use let's see a div. 24 00:01:10,390 --> 00:01:11,500 Just a div. 25 00:01:12,500 --> 00:01:13,160 Dave. 26 00:01:15,700 --> 00:01:16,240 Like that. 27 00:01:16,240 --> 00:01:20,170 And then in there I can add my p tag and add any text. 28 00:01:20,170 --> 00:01:30,550 But inside the the Dave let me add h h is three and since that border example. 29 00:01:32,120 --> 00:01:39,120 So I want to target I want to target this particular Dave here. 30 00:01:39,170 --> 00:01:40,340 This Dave here. 31 00:01:41,060 --> 00:01:44,320 I will have one day I'm going to select only one Dave here. 32 00:01:44,330 --> 00:01:46,310 So let me select that. 33 00:01:46,430 --> 00:01:47,300 So let me save it. 34 00:01:47,300 --> 00:01:48,740 Let me select that here. 35 00:01:49,400 --> 00:01:52,970 I only style mine because it's a block level element. 36 00:01:53,120 --> 00:01:56,030 I can use width and height. 37 00:01:56,030 --> 00:01:58,550 So here let me add a background color. 38 00:01:59,210 --> 00:02:05,300 A background color, let's say black and a text on it. 39 00:02:05,330 --> 00:02:11,750 Let's see the color on the let me call it any color of your choice as white. 40 00:02:12,110 --> 00:02:12,680 Yes. 41 00:02:12,680 --> 00:02:13,940 So border here. 42 00:02:14,180 --> 00:02:20,480 So how can we add border around this once that's what we are going discuss about. 43 00:02:20,720 --> 00:02:23,420 So we have what is called border top. 44 00:02:23,780 --> 00:02:25,250 The border top is here. 45 00:02:26,300 --> 00:02:30,800 It asks line along the top margin of a box and border. 46 00:02:30,800 --> 00:02:31,430 Right. 47 00:02:31,430 --> 00:02:39,170 As also I see that this adds border along the right of the box and then bottom and the left. 48 00:02:39,170 --> 00:02:41,030 So let's see in action. 49 00:02:41,150 --> 00:02:49,220 So the same diff here I can add if I say border like this one, this center simply means that all the 50 00:02:49,220 --> 00:02:54,620 sizes, the top left, right and bottom of that. 51 00:02:54,860 --> 00:02:58,490 But I think let's remove this one for now, this background. 52 00:02:58,490 --> 00:02:59,450 Let's stick to this ones. 53 00:02:59,450 --> 00:03:00,110 Yes. 54 00:03:00,110 --> 00:03:00,860 Now let me see. 55 00:03:00,860 --> 00:03:01,160 Let's see. 56 00:03:01,250 --> 00:03:01,970 I border. 57 00:03:02,480 --> 00:03:06,230 This is the syntax first of all, because I want to add border. 58 00:03:06,230 --> 00:03:09,770 I want to draw a line around this particular element here. 59 00:03:10,190 --> 00:03:16,130 So in specify some syntax, the first one is the the width which is called pesos. 60 00:03:16,130 --> 00:03:20,330 Okay, the width of the box of the border, one pesos. 61 00:03:20,540 --> 00:03:23,780 Then specify the kind of color style. 62 00:03:24,230 --> 00:03:27,650 All the colors that are specified here are all solid colors. 63 00:03:27,650 --> 00:03:28,970 So this is solid. 64 00:03:29,090 --> 00:03:32,840 Then the name of the color, let me say red. 65 00:03:33,110 --> 00:03:39,710 Meaning when I save it, you see that I have this beautiful border around it. 66 00:03:40,160 --> 00:03:40,850 You see that? 67 00:03:41,270 --> 00:03:42,830 That's a border around that. 68 00:03:43,070 --> 00:03:44,720 That is the center. 69 00:03:44,750 --> 00:03:54,980 So this border simply means that this syntax can be read in as border, port top. 70 00:03:56,620 --> 00:03:58,120 What I hope is this. 71 00:03:59,430 --> 00:04:00,540 Is this one? 72 00:04:01,440 --> 00:04:07,590 And then changes one one to copy eight copy, eight copy, eight a paste paste and copy it. 73 00:04:07,590 --> 00:04:08,760 So here won't be a top. 74 00:04:09,550 --> 00:04:10,470 Bottom. 75 00:04:11,350 --> 00:04:13,610 You're going to be right. 76 00:04:14,170 --> 00:04:15,220 And then. 77 00:04:15,970 --> 00:04:16,779 Left. 78 00:04:17,610 --> 00:04:22,140 So if I saw this one same the same time, same as the shorthand syntax here. 79 00:04:22,320 --> 00:04:29,010 So if I remove this one or comment it out and save it, you see, I still see the same thing. 80 00:04:29,580 --> 00:04:37,680 But the flexibility of the individual ones, the top is that we can change the colors of these border. 81 00:04:38,720 --> 00:04:44,810 So for example, the top one I want increase the weight or making, let's say, ten paychecks. 82 00:04:45,140 --> 00:04:48,380 You see that now on the top now is ten pieces. 83 00:04:48,410 --> 00:04:49,850 It looks beautiful, right? 84 00:04:49,880 --> 00:04:51,630 I can also change the colour. 85 00:04:51,650 --> 00:04:54,350 Let's say going to be as yellow. 86 00:04:55,750 --> 00:04:57,620 And you see how beautiful that one is. 87 00:04:57,640 --> 00:05:00,340 So I think the yellow is know that I can change it. 88 00:05:00,340 --> 00:05:02,230 They say this color. 89 00:05:02,830 --> 00:05:03,460 Yes. 90 00:05:03,460 --> 00:05:11,350 If we see so on the on the bottom too I can change the the way let's say going to be 26. 91 00:05:11,650 --> 00:05:12,940 You see how it is. 92 00:05:13,360 --> 00:05:15,550 I can change the color or whatever. 93 00:05:15,760 --> 00:05:23,590 And then on the right I can say supposed to be five, but instead I'm going to make it as dash or dot 94 00:05:23,590 --> 00:05:23,920 it. 95 00:05:26,430 --> 00:05:27,450 We see that here. 96 00:05:27,450 --> 00:05:29,190 We have that dotted here. 97 00:05:29,580 --> 00:05:32,400 See how beautiful we are designed with CSIS. 98 00:05:32,670 --> 00:05:39,380 So on the left too, we can make it as five, but instead change the color to a key 25. 99 00:05:39,390 --> 00:05:40,970 So this one looks nice. 100 00:05:40,980 --> 00:05:46,280 You see how we can use the box model to lay out this content nicely on the page? 101 00:05:46,290 --> 00:05:51,140 That's the beauty of the model and that's the beauty of the border property. 102 00:05:51,150 --> 00:05:54,210 The next video, let's talk about margin.