WEBVTT 0 00:00.350 --> 00:00.980 Hey, guys. 1 00:00.980 --> 00:07.190 In this lesson, we're going to talk about some other really important CSS properties and they're ones that 2 00:07.190 --> 00:12.140 you might have already seen if you've been doing a little bit of CSS inspection around the Internet. 3 00:12.140 --> 00:19.670 And these are Margin, Padding, and the Border properties and these three properties, along with Width 4 00:19.670 --> 00:25.760 and Height, form a really important CSS concept known as the "Box model". 5 00:25.760 --> 00:27.830 So what exactly is it? 6 00:27.860 --> 00:33.110 Well, if you think about a typical website here, I've created one called I Love Bacon, 7 00:33.140 --> 00:38.000 then you've got different components that are on screen, different HTML elements. 8 00:38.000 --> 00:46.820 And even though we can't really see it, effectively each element is a box in itself, and we can change 9 00:46.820 --> 00:51.110 the dimensions of those boxes by changing things such as width and height. 10 00:51.110 --> 00:54.230 So in this case, I've made my bacon much, much bigger. 11 00:54.230 --> 01:00.290 And that invisible box around the element describes how it would be laid out on screen. 12 01:00.290 --> 01:06.980 If we have an element that has a height of 300px, we can change that height to allow our element 13 01:06.980 --> 01:10.100 to take up more vertical spacing on the web page, 14 01:10.130 --> 01:18.020 and when this happens, it pushes the box of any other elements lower on the web page. 15 01:18.380 --> 01:24.470 Now, similarly, we can also change the width of an element to allow it to take up more space horizontally, 16 01:24.470 --> 01:31.280 and we can either do this using pixels as defined here or we can use percentages. 17 01:31.280 --> 01:38.390 So in this case, we've gotten our blue element to take up the entire width of the website and that 18 01:38.390 --> 01:43.580 can be done using percentages. In addition to width and height, 19 01:43.610 --> 01:48.500 we can also set a border on each of the HTML elements. 20 01:48.500 --> 01:55.250 If you imagine, again each HTML element being a box, then this would be the border of the box. 21 01:55.970 --> 02:01.950 And the way that the border property works is a little bit different from what you might have seen before. 22 02:02.070 --> 02:07.650 It can take three values separated by a space. 23 02:07.860 --> 02:13.680 The first value that you should provide is the thickness of the border, 24 02:14.190 --> 02:18.510 and this, as you can see here, is the thickness of this line. 25 02:18.510 --> 02:21.720 If I made it thicker, then it would look like this. 26 02:21.720 --> 02:26.910 And so we can provide a pixel value for the thickness as the first item. 27 02:27.090 --> 02:31.140 Now, the second item is the style of the border. 28 02:31.170 --> 02:37.440 You can have, for example, solid, but you can also have a dashed line, in which case the border 29 02:37.440 --> 02:43.710 would look something like this instead of a solid line as we've gotten here. 30 02:44.700 --> 02:52.500 And finally, we've got the color of the border in which you can set to any named color or hex color 31 02:52.500 --> 02:59.400 as we've covered in the color properties lesson. These are three items together determine what the 32 02:59.400 --> 03:01.790 border should look like. 33 03:01.790 --> 03:09.380 So if I was to change the border from 10px to 30px, then we would get a lot thicker of a 34 03:09.380 --> 03:10.040 border, 35 03:10.040 --> 03:18.350 but remember, the important thing is that the height and the width of your HTML element, your box 36 03:18.350 --> 03:19.840 does not change. 37 03:19.850 --> 03:23.870 It's exactly the same as what it was before. 38 03:23.870 --> 03:28.580 So this border actually goes outwards rather than inwards 39 03:28.580 --> 03:31.100 and that's the important thing to remember here. 40 03:32.030 --> 03:38.780 Now, once you've defined a border, you can further modify it with more specific rules. 41 03:38.780 --> 03:46.430 So, for example, in this case, I've got a around 30px solid black border around my element, 42 03:46.430 --> 03:53.270 but then afterwards on the next line, and this is very important where this line goes, it has to go 43 03:53.270 --> 03:55.730 after the point where we've created the border. 44 03:56.240 --> 04:02.550 In this case, I'm saying I want the top of that border to be 0px instead. 45 04:02.550 --> 04:09.030 Well, the way that these rules are evaluated is first they will look at this line creating this 46 04:09.030 --> 04:11.970 border, which is 30 pixels all around, 47 04:11.970 --> 04:18.480 but then once it lands on the next line, it evaluates this rule and sees that actually I should amend 48 04:18.510 --> 04:21.570 the top of the border to have zero pixels. 49 04:21.570 --> 04:25.770 So effectively getting rid of the border at the top here. 50 04:26.520 --> 04:33.270 This border width works similarly to the way that the border property works, namely that it can take 51 04:33.270 --> 04:35.970 a maximum of four values. 52 04:36.000 --> 04:45.570 The first value is the top, the second is the right, third is the bottom, and the fourth is the left. 53 04:45.600 --> 04:48.930 It goes in a clockwise direction. 54 04:49.110 --> 04:54.690 In addition, you can also just provide two values for the border width. 55 04:54.720 --> 04:59.790 And what that does is it sets one and three, 56 05:00.040 --> 05:03.460 and then it sets two and four. 57 05:03.700 --> 05:12.940 For example, if my border width, I had set to 0px and 20px, then what that would do 58 05:12.940 --> 05:19.720 is it would set two and four, which is the left and right, to 20px , and then it would set one 59 05:19.720 --> 05:21.700 and three to 0px. 60 05:21.730 --> 05:24.850 This then becomes top and bottom 61 05:26.190 --> 05:29.730 and then we've got our left and right. 62 05:31.560 --> 05:37.530 Now, another property I want to talk about in regards to the box model is something called padding. 63 05:37.530 --> 05:41.760 And this is most easily seen when we have content such as text. 64 05:41.850 --> 05:48.210 So in this case, imagine that this blue box is a paragraph element. 65 05:48.300 --> 05:53.460 And in the paragraph element we've got "Hello world" repeated many, many times. 66 05:53.610 --> 06:02.070 This paragraph element has got a border property and it's a solid black border, measuring 30px 67 06:02.070 --> 06:03.120 wide all around. 68 06:04.160 --> 06:14.030 If at this point I add a padding property to this element, then what would happen is it would push 69 06:14.030 --> 06:18.770 my border out by 20px. 70 06:18.770 --> 06:23.900 And in this case, I'm pushing it by 20 on all sides. 71 06:24.260 --> 06:33.260 And notice how, again, in this situation, the height and the width of this box does not change, 72 06:33.260 --> 06:34.690 it's still the same. 73 06:34.700 --> 06:43.190 The padding simply adds this padding or space between the element and the border. 74 06:43.880 --> 06:48.180 In addition to the padding, there's also something known as a margin. 75 06:48.200 --> 06:54.330 And the margin is actually the part that's outside of the border. 76 06:54.350 --> 07:03.170 So here again is the border, in between the border and the width and height of the element, 77 07:03.860 --> 07:12.680 is the padding and the part between the border and any other content that's on the screen is the margin. 78 07:12.680 --> 07:18.410 So in this case, we've added a margin of 10px on all four sides. 79 07:19.010 --> 07:27.170 If you imagine, we had two elements, each with the same padding, margin and border, then this margin 80 07:27.170 --> 07:35.060 or this distance between the two elements in this case will actually be 20px because it's 10px 81 07:35.060 --> 07:37.700 from this side and 10px from this side. 82 07:37.700 --> 07:43.390 And it adds this spacing between elements that you would not get with the padding. 83 07:43.400 --> 07:45.980 So that is the main difference. 84 07:47.020 --> 07:56.530 In your CSS inspection, you might have seen the box model already shown in the CSS inspector, and it shows 85 07:56.530 --> 08:01.090 you the margin, the border, the padding and the width and height. 86 08:01.180 --> 08:05.330 So that's what all of these different colors represent. 87 08:05.350 --> 08:13.450 And when you take a look at the box model on inspection, then you can actually change each of these 88 08:13.450 --> 08:18.460 values to see how it would look differently. If you head over to this address, 89 08:18.490 --> 08:25.960 appbrewery.github.io/box-model/, and then we go ahead and open up the Developer Tools 90 08:25.960 --> 08:34.690 and we select on the first image here, which shows a daytime world and we go into the box model that's 91 08:34.690 --> 08:36.390 under the Styles tab. 92 08:36.400 --> 08:43.720 If I go ahead and add a margin right here, let's say, I don't know, 100px, then it's going 93 08:43.720 --> 08:45.220 to add that gap. 94 08:45.220 --> 08:50.630 Did you see it just now? That gap between that image and anything that's below it. 95 08:50.780 --> 09:00.470 And similarly, if I add a little bit of a margin above, say, 100px, then you can see it adds 96 09:00.470 --> 09:05.840 a gap between that image and the next element above, which is that paragraph tag. 97 09:05.930 --> 09:14.720 However, if I added the padding as 100px, then you'll see it add the space as well 98 09:14.720 --> 09:19.520 but it's actually inside the border of the image. 99 09:20.030 --> 09:30.200 If this element actually had a border which will set as a 10px solid black, then you can see 100 09:30.200 --> 09:35.060 how that padding goes to a different place versus where the border goes. 101 09:35.060 --> 09:41.960 And this box model is going to come really, really handy when you start to try and lay out different 102 09:41.960 --> 09:48.290 items on your website determining how they look and where they're placed relative to each other. 103 09:48.620 --> 09:57.350 The final thing I wanted to mention is that padding and margin, similar to what we saw for the border 104 09:57.680 --> 10:07.460 and also the border-width, function in that same way where we've got one, two, three and four values 105 10:07.460 --> 10:16.190 that we can provide and if we provide a different value for each of them, so 0, 10, 20 and 30 106 10:16.190 --> 10:22.490 pixels, then this will determine how it looks on all four sides. 107 10:22.490 --> 10:30.830 And you have to remember that this is where the first value is, second, and it goes around in a clockwise 108 10:30.830 --> 10:31.790 direction. 109 10:32.240 --> 10:37.460 Again, with the border-width, you can change to only provide two values. 110 10:37.460 --> 10:47.390 So say 10px and 40px, then this is going to be applied to the top and the bottom and also 111 10:47.390 --> 10:49.490 the left and the right. 112 10:49.910 --> 10:57.980 So this is just a particular way of how these three properties can accept multiple values. 113 10:57.980 --> 11:06.140 If you only set one value, say 10px, then that's going to affect all sides. In addition to the 114 11:06.140 --> 11:13.670 boxes that are created by elements, we can actually create our own boxes independent of that, and 115 11:13.670 --> 11:19.460 that's really useful when we want to group different bits of content together so that we can style it 116 11:19.460 --> 11:20.030 together, 117 11:20.030 --> 11:22.250 or maybe we want to lay it out together. 118 11:22.250 --> 11:31.100 For example, here we have an image and maybe I would want the image to have a caption and I would probably 119 11:31.100 --> 11:38.390 want to style these two bits together so I can wrap a box around these two elements. 120 11:38.510 --> 11:46.130 And the way that I would create these artificial boxes is through the use of a HTML element, which 121 11:46.130 --> 11:48.980 is called the "Content Division Element." 122 11:48.980 --> 11:55.300 There was no point in learning about the div element before we could learn about CSS because these are 123 11:55.300 --> 12:04.960 completely invisible unless you apply CSS style to it and the whole purpose is to act as an invisible 124 12:04.990 --> 12:12.100 box that can contain content in between the opening and the closing tags. 125 12:12.250 --> 12:20.290 In the middle, we can put as many elements as we want and we can group them into separate boxes known 126 12:20.290 --> 12:21.640 as "divs." 127 12:22.540 --> 12:30.640 So here I've got the HTML code from that website I showed you earlier with the two versions of our world, 128 12:30.640 --> 12:32.980 the morning and the evening view. 129 12:32.980 --> 12:38.620 And it's really simple and I've only just taken the body section of the HTML. 130 12:38.620 --> 12:45.610 But here notice that we've got a paragraph tag and an image tag and they're grouped together through 131 12:45.610 --> 12:46.060 the use 132 12:46.260 --> 12:52.800 of this div element and notice that the div element doesn't really do anything else other than act as 133 12:52.800 --> 13:00.690 a container to group this section together so that it's separated from other content 134 13:00.690 --> 13:03.240 for example, this section right here. 135 13:04.290 --> 13:11.400 And now, we've not only added meaning to our HTML by saying this is one section of content and this is 136 13:11.400 --> 13:17.070 another section of content, but in addition we can style them differently in CSS. 137 13:17.700 --> 13:21.210 When we run our code, this is what the website would look like. 138 13:21.240 --> 13:29.220 You would not see any of these div elements, but if we were able to see them then they would look like 139 13:29.220 --> 13:29.640 this, 140 13:29.640 --> 13:35.010 grouping our elements together because these divs are invisible, 141 13:35.010 --> 13:41.010 sometimes it can be really hard to debug them and understand what's going on or more likely what's going 142 13:41.010 --> 13:42.690 wrong with your CSS. 143 13:42.900 --> 13:50.640 So there's a free Chrome extension that I recommend you download to make this process of debugging a 144 13:50.640 --> 13:54.510 little bit easier and hence that's why it's called "Pesticide." 145 13:54.540 --> 13:57.630 We're going to use it to get rid of bugs in our CSS. 146 13:58.200 --> 14:05.410 I'll add a link to this Chrome extension and all you have to do is click, "Add to Chrome" and then "Add 147 14:05.410 --> 14:06.430 extension," 148 14:06.430 --> 14:12.910 and once you've got it, then you should be able to look inside your extensions and then open it up 149 14:12.910 --> 14:14.410 to activate it. 150 14:14.440 --> 14:16.000 Now what does it do? 151 14:16.030 --> 14:17.320 Well, let's demo it. 152 14:17.410 --> 14:23.800 In addition to the suite of developer tools you've got now, you've also got the Pesticide working for 153 14:23.800 --> 14:24.300 you. 154 14:24.310 --> 14:32.950 And once you activate it, you can see these div boxes now show up on screen and you can also see the 155 14:32.950 --> 14:38.890 different elements highlighted in boxes and it really helps you diagnose what's wrong with your box 156 14:38.890 --> 14:40.750 model when it does go wrong. 157 14:40.840 --> 14:46.360 In addition, if you close down the Chrome developer tools and hold down the control key, when you 158 14:46.390 --> 14:53.980 hover on each of these boxes down at the bottom of the screen, you can see how it tells you which node 159 14:53.980 --> 14:55.360 you're actually hovering on. 160 14:55.360 --> 15:02.200 So in this case, I'm inside a div and it shows you if there are any classes or IDs on that div as well. 161 15:02.200 --> 15:09.070 And then here I'm hovering on an image element and here I'm hovering on a paragraph element and this 162 15:09.070 --> 15:15.850 can be really helpful for you to see exactly what's on screen and almost like put on night vision goggles 163 15:15.850 --> 15:21.010 so that we can see our divs, and our elements, and their alignment, and their sizing. 164 15:21.640 --> 15:27.090 Finally, we're going to use everything that we've learned and put it all together in this exercise 165 15:27.230 --> 15:30.070 where we're going to write some code and apply our knowledge. 166 15:30.250 --> 15:37.300 Go ahead and download this zipped file from this current lesson, extract it and open it inside VS Code. 167 15:37.630 --> 15:43.930 Now, once you've done that, open up the index.html and you should see a bunch of TODOs. 168 15:44.110 --> 15:50.800 I want you to follow each of the steps one by one, just as if you were a web developer following client 169 15:50.800 --> 15:51.790 instructions, 170 15:51.790 --> 15:57.250 and we're going to use everything you've learned so far in order to create something that looks like 171 15:57.250 --> 15:57.860 this. 172 15:57.880 --> 16:03.420 Now, I've marked up this page a little bit so I can show you the important parts of the requirements. 173 16:03.430 --> 16:11.050 For example, notice that here I've said 20 pixel padding, and that applies to the distance between 174 16:11.050 --> 16:14.110 that paragraph tag and the border. 175 16:14.620 --> 16:20.740 And then here I've said it should have a 20px border at the top and at the bottom, but then only 176 16:20.740 --> 16:23.560 a 10px border on the left and the right. 177 16:23.680 --> 16:27.270 And notice that the layout is very specific here. 178 16:27.280 --> 16:31.330 Each of these boxes should be touching corner to corner. 179 16:31.330 --> 16:37.570 So you're going to have to figure out how to use the margin property in order to push these boxes around 180 16:37.570 --> 16:42.400 so that they're literally aligned right up to each other on the same pixel. 181 16:42.850 --> 16:50.200 I'm going to leave you to pause the video and go through each of these requirements and hopefully you 182 16:50.200 --> 16:54.730 will be able to create a website that looks like the goal image. 183 16:54.850 --> 16:58.930 Pause the video now and complete this challenge. 184 17:01.460 --> 17:01.850 All right. 185 17:01.850 --> 17:04.230 So let's go through the solution together. 186 17:04.250 --> 17:12.320 Now, the first thing you'll notice is we've created three divs and I've added a paragraph tag into 187 17:12.320 --> 17:16.490 the first div so that we can see our padding a bit more easily. 188 17:16.790 --> 17:23.570 The next thing is we've set each of the divs, a height and width to a pixel size, namely 200px. 189 17:23.900 --> 17:31.400 Next I've added a paragraph element inside the first div so that we can see any padding that gets added 190 17:31.400 --> 17:32.600 very easily. 191 17:32.810 --> 17:40.280 And I've set the first div to have 20px of padding all around with a black 10px border and 192 17:40.280 --> 17:42.860 that you can see under here. 193 17:42.950 --> 17:50.780 Now notice how I've used different IDs for the different boxes or divs, and this way I can uniquely 194 17:50.780 --> 17:54.440 identify each div and set different styling to them. 195 17:55.510 --> 17:56.410 Next step, 196 17:56.410 --> 18:03.460 I've targeted the paragraph element so that I remove any of the margins that go on it, because if we 197 18:03.460 --> 18:13.240 preview our solution and open this up inside Chrome, you can see that by default, each paragraph element 198 18:13.240 --> 18:17.800 actually gets 1em of margin at the start and the end. 199 18:17.800 --> 18:23.650 So if I cancel this, you can see how it pushes that away from the containing div. 200 18:23.680 --> 18:29.380 So we wanted to add the zero margin so that we would have it centered and it would not be affected by 201 18:29.380 --> 18:30.750 its default styling. 202 18:30.760 --> 18:38.230 Next, we had you set the second div to have a 20px border, top and bottom and 10px border, left 203 18:38.230 --> 18:39.250 and right. 204 18:39.250 --> 18:46.510 And if you remember from the lesson this is achieved through that multi-value method of setting 205 18:46.510 --> 18:46.870 border-width. 206 18:46.870 --> 18:50.110 So the first value is top and bottom. 207 18:50.110 --> 18:53.890 And then after space we have the second value for the left and right. 208 18:53.890 --> 18:59.900 And even if you hover over this, usually the code is quite helpful for pulling up the MDN reference on 209 18:59.900 --> 19:02.570 this, and it tells you how the rules work. 210 19:02.570 --> 19:03.980 So that's a quick tip. 211 19:04.670 --> 19:11.900 Finally, we set the third div to have a 10px border and I wanted you to set the margins so that 212 19:11.900 --> 19:14.360 they would each touch corner to corner. 213 19:14.390 --> 19:18.020 Now that could be done either by trial and error. 214 19:18.050 --> 19:24.290 Alternatively, you can also work it out, because if you think about this first div right here, it's 215 19:24.290 --> 19:29.990 got a width of 200px, so this part is 200. 216 19:29.990 --> 19:35.420 But in addition, it's also got a border of 10px all around. 217 19:35.420 --> 19:39.590 So then we have to add 10 and 10 here. 218 19:39.770 --> 19:42.590 Now that takes us up to 220. 219 19:42.590 --> 19:47.060 But in addition, remember that we added 20px of padding all around. 220 19:47.060 --> 19:51.080 So then there's 20 here and 20 here. 221 19:51.080 --> 20:00.710 So then if we add it all up, 200+20+20+10+10, that ends up with 260px. 222 20:00.710 --> 20:08.630 So then we know that we have to push the second div over by 260px and we can do that using the 223 20:08.630 --> 20:13.610 margin-left setting, which is how we manage to push this box over. 224 20:13.610 --> 20:19.340 And in a similar way, we can work out how much to push this third box as well. 225 20:20.300 --> 20:26.330 I hope this challenge was sufficiently challenging enough for you, but don't worry if it's not 'cause 226 20:26.330 --> 20:31.430 there's way more challenging layouts are coming up in the rest of the course and you're going to be 227 20:31.460 --> 20:37.010 able to flex your box model muscles in the coming sections as well. 228 20:37.040 --> 20:42.740 But once you're ready and you've reviewed your code and fixed any errors, head over to the next lesson 229 20:42.740 --> 20:45.590 where we've got the final project for the section.