NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,470 Hi guys and welcome back. 2 00:00:01,500 --> 00:00:05,220 In this lecture, let's continue working on our learning HTML project. 3 00:00:05,460 --> 00:00:09,060 We're going to be fixing a few issues with spacing, like the size of that 4 00:00:09,090 --> 00:00:11,520 image, as well as a couple other issues. 5 00:00:11,640 --> 00:00:12,390 Let's get to it. 6 00:00:13,830 --> 00:00:16,670 As we've discussed, one of the things that we're almost always going to do 7 00:00:16,670 --> 00:00:19,710 is set the box-sizing to border-box. 8 00:00:19,730 --> 00:00:20,600 So that's what I'm going to do. 9 00:00:20,600 --> 00:00:22,700 First box-sizing, border-box. 10 00:00:22,890 --> 00:00:25,280 That's just going to make all the elements behave in the 11 00:00:25,280 --> 00:00:27,050 way that you'd really expect. 12 00:00:27,440 --> 00:00:29,060 And so that's why I'm making that change. 13 00:00:29,300 --> 00:00:33,500 And then we're going to do what we also talked about setting every 14 00:00:33,620 --> 00:00:36,830 other element to have that as well. 15 00:00:36,860 --> 00:00:40,200 So we'll do box-sizing: inherit just like that. 16 00:00:40,770 --> 00:00:43,950 So if we save that and refresh our page, you'll see that nothing changes 17 00:00:43,980 --> 00:00:48,900 that's because we weren't really doing anything that this would affect, but if 18 00:00:48,900 --> 00:00:52,410 we do later on, then this is going to help us make sure that it makes sense. 19 00:00:52,910 --> 00:00:56,750 One of the most frequent changes in any website involves limiting the size of the 20 00:00:56,750 --> 00:00:59,510 main content and centering it on the page. 21 00:01:00,130 --> 00:01:03,410 So here's what my site looks like in full width. 22 00:01:03,680 --> 00:01:05,230 And you can see that everything's left aligned. 23 00:01:05,230 --> 00:01:08,510 So if I want to look at it in our launch screen, it's going to be really difficult. 24 00:01:08,900 --> 00:01:12,350 And the text is going to get really long if we have long paragraphs. 25 00:01:12,595 --> 00:01:14,515 So that's going to get difficult to read as well. 26 00:01:14,905 --> 00:01:18,325 What we want to do is we want to make sure that it's centered so 27 00:01:18,325 --> 00:01:23,185 that the whole website only takes up a smaller amount of space. 28 00:01:24,185 --> 00:01:27,365 Obviously, when the site is small, like this, that's not going to make much of 29 00:01:27,365 --> 00:01:30,515 a difference, but I'll show you sort of the changes and what they mean. 30 00:01:31,015 --> 00:01:35,175 We can make this changed by first going into our index.html and I'm going to put 31 00:01:35,865 --> 00:01:39,135 all off content inside a main element. 32 00:01:39,635 --> 00:01:41,675 Then I'm going to make sure to indent this, just so it 33 00:01:41,675 --> 00:01:42,455 looks a little bit better. 34 00:01:42,515 --> 00:01:44,715 Again, HTML doesn't care about indentation. 35 00:01:44,735 --> 00:01:46,925 So it doesn't matter whether you indent or not. 36 00:01:47,495 --> 00:01:51,625 And now if I save this and I refresh, you'll see that nothing changes . The 37 00:01:51,625 --> 00:01:55,915 meaning of the content has changed slightly because now any screen reader 38 00:01:55,915 --> 00:01:59,935 or piece of software can understand that this here or the entire page content 39 00:02:00,295 --> 00:02:03,205 is part of the main content, there's no headers or anything like that. 40 00:02:03,565 --> 00:02:05,575 But obviously we haven't changed the CSS. 41 00:02:05,655 --> 00:02:07,635 So the look of it hasn't changed at all. 42 00:02:08,135 --> 00:02:11,675 What we want to do is we want to grab the main element and 43 00:02:11,675 --> 00:02:13,615 we want to give it a max-width. 44 00:02:14,090 --> 00:02:19,640 So, what we'll do is main and then max-width, let's say 35 rem. 45 00:02:20,570 --> 00:02:26,090 So now if we refresh the page, you'll see that the paragraphs do get cut 46 00:02:26,090 --> 00:02:30,890 off because they are over the size that is allowed for the main element. 47 00:02:31,250 --> 00:02:34,220 If we right click on any of these and inspect. 48 00:02:34,770 --> 00:02:36,730 So I'll hover over the body and you can see that it takes up 49 00:02:36,730 --> 00:02:40,240 the entire page, except for a very small margin on the sides. 50 00:02:40,810 --> 00:02:43,930 But if I go to the main element, you can see that its size, the 51 00:02:43,930 --> 00:02:45,820 blue area, is much smaller. 52 00:02:46,370 --> 00:02:48,560 So how do we center this on the page? 53 00:02:48,680 --> 00:02:53,240 Well, we're going to use margins, so I'll do margin zero auto. 54 00:02:53,900 --> 00:02:57,770 When you pass two values to the margin property, the first one is 55 00:02:57,770 --> 00:03:00,010 for the top and the bottom margins. 56 00:03:00,310 --> 00:03:02,620 And the second one is for the left and right margins. 57 00:03:03,340 --> 00:03:07,535 Auto sets the margin to be as large as possible within 58 00:03:07,535 --> 00:03:08,885 the size that is available. 59 00:03:09,215 --> 00:03:12,005 So here, because we're setting both left and right margins to be as 60 00:03:12,005 --> 00:03:15,815 large as possible, they're going to essentially push the content 61 00:03:15,815 --> 00:03:17,375 into the center of the page. 62 00:03:17,405 --> 00:03:19,535 So let me just refresh the page. 63 00:03:19,645 --> 00:03:24,275 You can see nothing changes when we start enlarging the page here, then it 64 00:03:24,275 --> 00:03:29,825 gets bigger, but it's because the main element is still the same size, but it is 65 00:03:29,825 --> 00:03:33,395 now sort of within these margins there. 66 00:03:34,395 --> 00:03:36,645 You can also pass four values to margin. 67 00:03:36,675 --> 00:03:37,605 And I'm going to do that just now. 68 00:03:37,605 --> 00:03:39,525 So we can add a little bit of margin on the top. 69 00:03:39,555 --> 00:03:44,025 So that's the first value then right then bottom and then lead. 70 00:03:44,025 --> 00:03:48,555 So this goes clockwise and I'm going to set it to 3.75 rem so we can 71 00:03:48,585 --> 00:03:50,235 separate it a little bit from the top. 72 00:03:50,235 --> 00:03:53,115 You can see there, there's a wee bit of gap now added. 73 00:03:53,615 --> 00:03:56,255 Finally, what we want to do with the image is we want to make sure 74 00:03:56,255 --> 00:03:59,375 that it has a max-width of 100%. 75 00:03:59,745 --> 00:04:03,665 A max-width of 100% is going to constrain the image width to be 76 00:04:03,665 --> 00:04:06,305 at most the size of its container. 77 00:04:06,365 --> 00:04:07,835 So that is the main element. 78 00:04:08,165 --> 00:04:11,525 If we refresh the page, now you can see that things start to get more centered. 79 00:04:11,810 --> 00:04:15,620 Because the browser understands that the image is actually part of this content 80 00:04:15,620 --> 00:04:17,270 here is not overflowing massively. 81 00:04:17,600 --> 00:04:20,450 So now this looks more like what we wanted. 82 00:04:20,890 --> 00:04:24,910 Earlier on the centering was a bit messed up, but now it all works well. 83 00:04:25,910 --> 00:04:28,910 We can also add a little bit of spacing under the heading, just to 84 00:04:28,910 --> 00:04:30,470 make it stand out a little bit more. 85 00:04:30,500 --> 00:04:33,650 And we're going to do that with margin-bottom, and we 86 00:04:33,650 --> 00:04:36,110 can do 2.5 rem, for example. 87 00:04:36,140 --> 00:04:39,020 That's going to separate it a little bit from the paragraph. 88 00:04:40,020 --> 00:04:41,070 Alright, that's everything. 89 00:04:41,070 --> 00:04:43,890 Have a play around with it, change some properties, make this 90 00:04:43,890 --> 00:04:45,780 your own, and practice some CSS. 91 00:04:45,780 --> 00:04:48,720 That's really going to help you really understand what's going on 92 00:04:48,720 --> 00:04:50,460 and how these different things work. 93 00:04:50,760 --> 00:04:53,610 Thank you for joining me in this video and I'll see you in the next one.