1 00:00:00,710 --> 00:00:10,610 Now, we've seen before that every single HTML element onscreen is just treated as a box by our CSS 2 00:00:10,940 --> 00:00:16,970 and by styling that box, by changing its height, its width, its margin, its padding, 3 00:00:17,300 --> 00:00:23,720 that's how we can determine how our elements can be laid out and how it will show up onscreen. 4 00:00:24,140 --> 00:00:32,300 So, for example, if we specified a CSS rule that targeted all the images on this I Love Bacon website 5 00:00:32,600 --> 00:00:35,570 to say that it should have a width of 100 percent, 6 00:00:36,020 --> 00:00:42,860 all that's going to do is it's going to change the width of that box to 100% 7 00:00:42,920 --> 00:00:51,230 and in the process scales up our image so that it expands to fill the entire width of our screen. 8 00:00:51,680 --> 00:00:57,980 And this concept in CSS is lovingly known as the box model. To explain this 9 00:00:58,010 --> 00:01:04,700 let's take a simple div that we've given a background color to, and let's say that this div has a height 10 00:01:04,700 --> 00:01:08,630 of 300 pixels and a width of 300 pixels to begin with. 11 00:01:08,780 --> 00:01:16,970 Now, if I change the height to 600 pixels, then that div will expand vertically, pushing down any 12 00:01:16,970 --> 00:01:21,260 other divs or any other content that's not inside this current container. 13 00:01:21,410 --> 00:01:27,710 Now I can also do the same with the width and make it much wider so that anything that used to be on 14 00:01:27,710 --> 00:01:31,010 the right of this current box would get pushed out of the way. 15 00:01:31,040 --> 00:01:36,290 Now you've seen that we can specify these values either as static pixels, 16 00:01:36,470 --> 00:01:42,620 so for example here, or we can use percentages, for example I can say that the width should be 100% 17 00:01:42,620 --> 00:01:47,030 and that refers to 100% of the viewport. 18 00:01:47,540 --> 00:01:51,350 Now, the viewport is just the screen that you're viewing the website on. 19 00:01:51,650 --> 00:01:57,680 So that could be your laptop screen or your mobile screen or your iPad screen, but this will expand 20 00:01:57,680 --> 00:02:00,800 to 100% of whatever that screen size may be. 21 00:02:01,100 --> 00:02:02,720 Now here's where it gets interesting. 22 00:02:02,960 --> 00:02:09,830 In addition to the width and the height of an element, you can also specify that it should have a border 23 00:02:09,890 --> 00:02:10,490 or not. 24 00:02:11,060 --> 00:02:17,780 Now, if you say that the border is going to be a solid border using CSS, then you will see a default 25 00:02:17,870 --> 00:02:21,020 3px border show up around your element. 26 00:02:22,760 --> 00:02:28,610 Now, remember that this border doesn't encroach on the size of your element, so if it's 300px 27 00:02:28,610 --> 00:02:34,100 by 300px, that blue area is still going to be 300 by 300. 28 00:02:34,730 --> 00:02:41,750 But you can expand the border size to say that the border width should be 50px all round, 29 00:02:41,990 --> 00:02:44,840 so that's 50 pixels on every single side. 30 00:02:45,410 --> 00:02:53,210 So now the width of this entire element is actually much wider because in addition to 300 pixels width 31 00:02:53,210 --> 00:02:54,540 for the original element, 32 00:02:54,590 --> 00:02:55,910 so that's the blue part, 33 00:02:56,300 --> 00:03:03,770 we've now also got a 50px border on each side, and the entire thing now takes up 400px. 34 00:03:03,890 --> 00:03:11,690 Now, instead of specifying a border for all four sides, you can override that border by saying 35 00:03:11,930 --> 00:03:16,340 specifically that the border top should only have zero pixels. 36 00:03:17,030 --> 00:03:23,690 Alternatively, you can use the circle shorthand, so it means that we're going around in a circle starting 37 00:03:23,690 --> 00:03:24,410 from the top. 38 00:03:24,860 --> 00:03:31,340 So the border width starting at the top is going to have 0px at the top, 10px at the right, 39 00:03:31,370 --> 00:03:35,120 20px on the bottom and 30px on the left. 40 00:03:36,500 --> 00:03:44,630 And as you go clockwise, you give your element dimensions that you specify for all four sides and there's 41 00:03:44,630 --> 00:03:48,950 other variations around this theme as well, which you'll find in the documentation. 42 00:03:49,520 --> 00:03:51,590 Now let's take this one step further. 43 00:03:52,040 --> 00:03:55,700 Let's say that we had some content in our div or in our box. 44 00:03:56,360 --> 00:03:58,940 Now, let's say that we had some text, for example. 45 00:04:00,720 --> 00:04:07,050 The first thing that we remember is that even if our div or our box had no height and no width, it 46 00:04:07,050 --> 00:04:10,950 will have the height and width in order to fit our content. 47 00:04:11,250 --> 00:04:14,160 Now let's say that we didn't like the way that this looks. 48 00:04:14,370 --> 00:04:20,940 We want to have a little bit of padding or a little bit of space between the text and the edge of the 49 00:04:20,940 --> 00:04:22,890 element or where the border starts. 50 00:04:23,370 --> 00:04:26,520 Well, then we can actually specify some padding. 51 00:04:27,150 --> 00:04:35,280 And this says that there should be 20px of space on all four edges between the text and the edge 52 00:04:35,610 --> 00:04:36,600 of the element. 53 00:04:36,990 --> 00:04:39,750 So now our box is even bigger. 54 00:04:40,080 --> 00:04:44,160 The padding actually increases the size of your box. 55 00:04:44,190 --> 00:04:52,860 Now, the final dimension that we can add is the margin, and the margin is a buffer zone, if you will, 56 00:04:52,890 --> 00:04:57,000 between the current element and any others that are on screen. 57 00:04:57,240 --> 00:05:02,910 So say, if I had another element on the right, the margin gives our element a little bit of space 58 00:05:02,910 --> 00:05:06,180 between each other outside of the border. 59 00:05:06,390 --> 00:05:12,900 And now you can start to see how we can use the margin, the padding, the border, the width and the 60 00:05:12,900 --> 00:05:20,460 height to start affecting the layout and the appearance of all of our HTML elements, which, as you 61 00:05:20,460 --> 00:05:23,670 remember at the end of the day, are just boxes. 62 00:05:24,240 --> 00:05:32,160 So that box model is shown every single time you inspect on an HTML element and you can see this little 63 00:05:32,160 --> 00:05:36,360 diagram in the Chrome developer tools every single time you hit Inspect. 64 00:05:36,720 --> 00:05:44,000 So, for example, if I select this div, then this is the current box model. It has no margin, no border, 65 00:05:44,020 --> 00:05:48,000 no padding, but it has a width and a height of this amount. 66 00:05:48,540 --> 00:05:55,020 Now, if I select the H1, then you can see that this actually has a margin at the bottom, which is 67 00:05:55,020 --> 00:06:00,840 21.4, and that's what's pushing it away from this paragraph element. 68 00:06:01,380 --> 00:06:04,680 But the paragraph element also itself has some values. 69 00:06:04,950 --> 00:06:09,300 For example, a 16px margin at the top and the bottom. 70 00:06:09,300 --> 00:06:16,620 And if I highlight this margin part on the box model, then you can see it show up highlighted in orange 71 00:06:16,800 --> 00:06:17,670 on our website. 72 00:06:17,820 --> 00:06:24,240 Now, it's pretty easy to edit these values using the box model inside Chrome developer tools, and 73 00:06:24,240 --> 00:06:28,800 that allows you to quite easily visualise what each of these things are doing. 74 00:06:29,190 --> 00:06:34,350 So, for example, say I wanted to give a little bit of padding to the content inside my div. 75 00:06:34,650 --> 00:06:42,060 Then I could double-click on this padding here and I could say maybe 20px from the top and 20px 76 00:06:42,060 --> 00:06:43,020 from the left. 77 00:06:43,320 --> 00:06:51,330 And now you can see that my text, my content rather, is pushed out from the left, and from the top. Now 78 00:06:51,330 --> 00:06:55,230 and it adds those rules over here in the styles. 79 00:06:55,650 --> 00:07:02,940 Now, instead of doing that, I could also just say, let's give it a 20px padding all round, all 80 00:07:02,940 --> 00:07:10,140 four sides. And you'll notice that the background colour is now in an area that's much bigger. 81 00:07:10,770 --> 00:07:15,780 And by increasing the padding, we've actually increased the size of our element. 82 00:07:16,650 --> 00:07:20,340 Now, that's not true for all of these different things. 83 00:07:20,610 --> 00:07:25,170 For example, let's add a 20px margin all around our div. 84 00:07:25,680 --> 00:07:32,010 Now, the parts that have the background colour represents our element, and the margin just takes it 85 00:07:32,010 --> 00:07:35,180 away from all the other things around. 86 00:07:35,190 --> 00:07:38,010 So in this case, we don't actually have much else around. 87 00:07:38,280 --> 00:07:42,600 We've only got the top, the left and the right of the screen to push it away from. 88 00:07:43,140 --> 00:07:50,360 But say, if we go back into Atom and as a challenge, I want you to add two more divs below this one 89 00:07:50,700 --> 00:07:54,840 and I want you to give each of these three divs a class. So 90 00:07:54,840 --> 00:07:57,240 the first one should be the top container, 91 00:07:57,360 --> 00:08:02,130 the second one will be called the middle container and the last one will be called the bottom container. 92 00:08:02,190 --> 00:08:09,240 And each of these two divs should be a square that has a height of 200 pixels and a width of 200 pixels 93 00:08:09,570 --> 00:08:14,670 and give them each a different background colour so that we can differentiate them on our website. 94 00:08:14,760 --> 00:08:21,090 And this is what you'll end up with if you complete the challenge: a red and blue div that are sitting 95 00:08:21,090 --> 00:08:26,460 on top of each other and they are 200 pixels wide in width and in height. 96 00:08:27,120 --> 00:08:30,240 So pause the video and try to complete the challenge. 97 00:08:31,930 --> 00:08:32,370 All right. 98 00:08:32,410 --> 00:08:33,820 So how did that go? 99 00:08:34,150 --> 00:08:39,130 Well, just below our first div we're going to go ahead and create two more of them. 100 00:08:39,340 --> 00:08:42,760 So that's the middle one and this is the bottom one. 101 00:08:43,060 --> 00:08:47,890 We're going to change the class to give it a value so that we can differentiate between them. 102 00:08:48,400 --> 00:08:55,110 Now, in this case, feel free to use ID or class, because if we're only going to have one top container, 103 00:08:55,120 --> 00:09:00,380 one middle and one bottom container, we can actually give this an ID or a class. 104 00:09:00,400 --> 00:09:02,770 It doesn't really matter all that much in this case. 105 00:09:03,100 --> 00:09:11,440 So if we call the top one top-container, middle one middle-container and the bottom one, 106 00:09:12,610 --> 00:09:20,230 bottom-container, now we have three different divs, and we can now style them inside our CSS separately. 107 00:09:21,460 --> 00:09:29,170 So instead of styling all the divs, we're going to instead select the top container, and remember, 108 00:09:29,170 --> 00:09:33,880 in order to pick out a class, we have to add a dot in front of that identifier. 109 00:09:34,900 --> 00:09:39,430 So for the top container class, I'm just going to paste in that background color. 110 00:09:40,240 --> 00:09:50,380 Next one is the middle container, and this one is going to have a background color of red. And the final 111 00:09:50,380 --> 00:09:52,390 one is the bottom container 112 00:09:54,230 --> 00:09:58,400 and this one's background color will be blue. 113 00:09:58,490 --> 00:09:58,910 Shall we? 114 00:09:59,690 --> 00:10:00,480 It's saved. 115 00:10:00,500 --> 00:10:07,250 And as we said, these two containers, because they don't have any content, then that means they won't 116 00:10:07,250 --> 00:10:09,890 have any dimensions unless we give it to them. 117 00:10:10,010 --> 00:10:19,070 So let's say that the middle container should have a width of 200 pixels wide and a height of 200 pixels 118 00:10:19,070 --> 00:10:19,490 as well. 119 00:10:19,520 --> 00:10:25,400 So now it's a box, and I'm just going to copy and paste that over to the bottom container as well. 120 00:10:25,850 --> 00:10:31,940 Now, if we hit save and we take a look, let's get rid of this, hit refresh. 121 00:10:32,360 --> 00:10:39,050 Then you can see that we've got our top div over here, a red square and a blue square all showing up 122 00:10:39,050 --> 00:10:39,980 on screen. 123 00:10:40,280 --> 00:10:46,460 Now, if we right-click and pull up the Chrome developer tools once more, then you can see that we 124 00:10:46,460 --> 00:10:50,750 can play around with all of these properties only using the Chrome developer tools. 125 00:10:51,380 --> 00:10:58,910 So for example, if I select my top container and I change the height to say 200 pixels, making it 126 00:10:58,910 --> 00:11:04,910 a little bit bigger and change its width also to 200 pixels, making it look a bit more like the other 127 00:11:04,910 --> 00:11:05,660 two squares. 128 00:11:05,840 --> 00:11:12,500 I can also add a bit of padding, so let's give it 20 pixels padding around all four edges. 129 00:11:12,950 --> 00:11:15,920 And you can see that this hasn't changed the height or width. 130 00:11:16,040 --> 00:11:18,980 The height and width are still 200 by 200, 131 00:11:19,340 --> 00:11:26,510 but now it has 20 pixels of padding all around it making the entire element that has that background 132 00:11:26,510 --> 00:11:33,320 color look a lot bigger than what it used to be because we've just added 40 pixels to the width and 133 00:11:33,320 --> 00:11:33,770 the height. 134 00:11:34,100 --> 00:11:38,620 Now what if we add a 10px solid border? 135 00:11:38,990 --> 00:11:45,200 Then you can see that that border hasn't affected the size of the part that has a blue background color, 136 00:11:45,560 --> 00:11:48,800 but it has made this whole element even larger. 137 00:11:49,070 --> 00:11:58,940 And now our height is 200 plus 30 pixels each side, so it's actually 260 pixels height and 260 pixels 138 00:11:59,300 --> 00:11:59,930 wide. 139 00:12:00,500 --> 00:12:03,020 Now what if I add a little bit of margin to this? 140 00:12:03,110 --> 00:12:07,370 Let's say we have a 10 pixel margin around all four sides. 141 00:12:07,520 --> 00:12:13,880 Now, the margin doesn't affect the height or the width or any of the other previous values, and it 142 00:12:13,880 --> 00:12:18,230 doesn't even change the part of the element that has the background color. 143 00:12:18,590 --> 00:12:24,980 It just gives it a little bit of space away from the other elements, and it pushes them away so that 144 00:12:24,980 --> 00:12:28,940 they're not sticking to this current container, this current div. 145 00:12:29,360 --> 00:12:38,120 Now, in order to better understand this idea of the box model, here's a demo that shows it from a 146 00:12:38,120 --> 00:12:39,620 3D point of view. 147 00:12:40,460 --> 00:12:48,320 So as you see me, drag the perspective where you can actually see that box model as it turns to the 148 00:12:48,320 --> 00:12:54,740 side and it shows you which parts are the padding, which parts will get filled with the background 149 00:12:54,740 --> 00:12:55,100 image, 150 00:12:55,430 --> 00:13:01,220 which parts will end up with the background color and which parts the content would go. 151 00:13:01,910 --> 00:13:07,940 So this is a neat tool to just toggle around and just wrap your head around this idea of the box model 152 00:13:08,210 --> 00:13:15,200 because it is a little bit weird that when you have padding, it only pads the content, but not things 153 00:13:15,200 --> 00:13:17,960 like the background image or the background color. 154 00:13:18,590 --> 00:13:24,830 So if you want, take a moment here, just pause a video, replay this part a few times and get your 155 00:13:24,830 --> 00:13:29,480 head around this idea of the CSS box model and how it's formed. 156 00:13:29,930 --> 00:13:33,410 Now, once you've done that, I've got a challenge for you. 157 00:13:33,740 --> 00:13:40,640 I want you to use the Chrome developer tools, so don't edit the styles inside Atom, but instead just 158 00:13:40,640 --> 00:13:46,850 make temporary changes to the website so that you can change the margins, the borders, the padding. 159 00:13:47,240 --> 00:13:52,880 Now, the only thing that's not going to change is the height and width of these divs or these boxes, 160 00:13:53,330 --> 00:13:56,750 but I want you to create a design that looks like this. 161 00:13:57,200 --> 00:14:04,100 So you're going to have that first box right towards the edge of the top and the left of the web page, 162 00:14:04,490 --> 00:14:09,320 then you're going to have the two other boxes that touch corner to corner. 163 00:14:09,680 --> 00:14:12,560 And the second one is going to have a 20 pixel border, 164 00:14:13,100 --> 00:14:16,460 and the third one is going to have a 10 pixel border. 165 00:14:16,880 --> 00:14:19,580 And you can change the color to match the scheme as well. 166 00:14:19,970 --> 00:14:26,390 But the main thing is that the corners must touch each other, and I want you to use a combination of 167 00:14:26,390 --> 00:14:32,480 margins, padding, border, whatever it may be in order to achieve this design. 168 00:14:33,050 --> 00:14:35,750 So pause the video now and give it a go. 169 00:14:38,640 --> 00:14:43,050 All right, so what you might realize is that this involves a little bit of math. 170 00:14:43,530 --> 00:14:49,650 So firstly, I'm going to switch my Chrome browser tool to make it go on the right side so I can look 171 00:14:49,650 --> 00:14:54,870 at this while I'm editing my CSS code and look at the box at the same time. 172 00:14:55,410 --> 00:15:04,220 So the first thing was that we wanted the top div to also be 200 pixels by 200 pixels. There we go. 173 00:15:04,250 --> 00:15:11,200 We've got our square, so we now have three squares, but we need the first one to have a 10px border. 174 00:15:11,940 --> 00:15:13,830 So border solid. 175 00:15:16,140 --> 00:15:20,880 And let's give it 20px padding around all four edges. 176 00:15:20,970 --> 00:15:27,540 All right, so onto the next part. Our middle box is red and it has a 20 pixel solid border. 177 00:15:27,870 --> 00:15:35,940 So let's go ahead and select the middle container, and we're going to give it a border that is going 178 00:15:35,940 --> 00:15:40,020 to be solid and 20px all around. 179 00:15:40,080 --> 00:15:46,800 But now we have to make the second box touch with the first box edge to edge. 180 00:15:47,310 --> 00:15:51,060 So this actually involves a little bit of calculating. 181 00:15:51,510 --> 00:15:53,580 So if we go back to that first box, 182 00:15:54,850 --> 00:16:03,850 we can see that it's width is calculated by all of these numbers, so it's 200px in terms of 183 00:16:03,850 --> 00:16:07,480 the content, then 20px either side 184 00:16:07,660 --> 00:16:14,380 so add 40 for the padding, then add another 20 for the border and the margin is zero. 185 00:16:14,680 --> 00:16:21,040 So that's actually 200 plus 40 plus 20, which is 260. 186 00:16:21,370 --> 00:16:32,920 So that means that if our second div had a left margin of two hundred and sixty pixels, then it will 187 00:16:32,920 --> 00:16:36,370 touch edge to edge with that first box. 188 00:16:36,790 --> 00:16:42,160 So if this challenge has baffled you up till now, then pause the video 189 00:16:42,160 --> 00:16:48,940 now that you've seen this little hint and try to do the same thing for the last box, making sure that 190 00:16:48,940 --> 00:16:54,710 you've implemented exactly what we wanted for the dimensions and the layout. 191 00:16:54,880 --> 00:16:57,610 But if you want to follow along with me, that's also cool. 192 00:16:57,940 --> 00:17:00,730 So first thing's first, this one is yellow, 193 00:17:00,760 --> 00:17:03,670 ours is blue, doesn't really matter, but we can change it over. 194 00:17:03,670 --> 00:17:08,740 So we're going to select our last div and we're going to change the background colour to yellow. 195 00:17:09,760 --> 00:17:12,940 Or gold or whichever color you want. 196 00:17:13,510 --> 00:17:17,780 And then we're going to give it a border of 10 pixels solid. 197 00:17:18,160 --> 00:17:24,370 So we're going to say border, solid 10px all around. 198 00:17:24,880 --> 00:17:31,150 And now we have to calculate how far we need to push this square in order to make it touch corner to 199 00:17:31,150 --> 00:17:31,630 corner 200 00:17:31,810 --> 00:17:33,490 with this red box. 201 00:17:33,850 --> 00:17:42,550 So we remember that this was 260px wide, calculating adding all of these border 202 00:17:42,550 --> 00:17:44,440 padding and widths together. 203 00:17:45,070 --> 00:17:48,580 And this one has a content of 200px wide, 204 00:17:48,730 --> 00:17:53,590 it has no padding, but it has a 20px border left and right. 205 00:17:53,890 --> 00:18:01,060 So in total, that's 240 in width, so 240 + 260 is 500. 206 00:18:01,510 --> 00:18:10,270 So if we select our last div and we give it a margin-left, so we can either type it out or we can select 207 00:18:10,270 --> 00:18:18,760 it inside the box model, but if we make this one 500px margin-left, then you'll see that the 208 00:18:18,760 --> 00:18:25,090 corners now all touch each other, and we have exactly the same design as we've got over here. 209 00:18:25,330 --> 00:18:26,470 Now, how did that go? 210 00:18:26,830 --> 00:18:32,500 If that was confusing at all, then make sure you play around more with the Chrome developer tools, 211 00:18:32,860 --> 00:18:40,780 either through changing everything in the box model here or by adding in new style rules through the 212 00:18:40,780 --> 00:18:42,760 CSS inside Chrome developer tools. 213 00:18:43,090 --> 00:18:49,450 But make sure that you can get these things to be pushed left and right and top and bottom, and make 214 00:18:49,450 --> 00:18:51,730 it look the way that you want it to. 215 00:18:52,390 --> 00:18:59,170 Now, if you want the boxes to line up one after the other on the same horizontal plane, then that's 216 00:18:59,170 --> 00:19:00,550 a little bit more difficult. 217 00:19:00,610 --> 00:19:03,220 And we're going to come to that very, very shortly. 218 00:19:03,520 --> 00:19:05,800 So don't beat yourself up if you can't do that. 219 00:19:06,100 --> 00:19:12,430 But you should be able to move it top and bottom, and add the padding add the borders and make the content 220 00:19:12,670 --> 00:19:14,020 look the way you want it to. 221 00:19:14,500 --> 00:19:18,400 But once you're done, hit refresh and all of that work goes away. 222 00:19:18,670 --> 00:19:25,330 But we're back to where we are and we can continue beautifying our website and giving it a proper modern 223 00:19:25,330 --> 00:19:25,780 design. 224 00:19:26,140 --> 00:19:31,510 Now, in the next lesson, we're going to talk about the CSS display property so that we can start 225 00:19:31,510 --> 00:19:35,650 to understand how the positioning of elements work onscreen. 226 00:19:36,070 --> 00:19:39,070 So for all of that and more, I'll see you on the next lesson.