0 1 00:00:00,860 --> 00:00:07,640 So in the last lesson we've started this brand new project where we're going to recreate a professional 1 2 00:00:07,640 --> 00:00:13,940 web designer’s personal site, and we're going to make it look as beautiful if not more beautiful than 2 3 00:00:14,060 --> 00:00:15,380 what we see here. 3 4 00:00:15,590 --> 00:00:23,960 So we started off strong by adding a favicon to our web site, but our web site is right now just a blue screen 4 5 00:00:24,290 --> 00:00:27,640 which is not that professional and not that pretty. 5 6 00:00:27,650 --> 00:00:30,090 So let's go ahead and change it. 6 7 00:00:30,380 --> 00:00:36,380 So head over to Atom and the first thing we're going to do is we're going to get rid of that awful background 7 8 00:00:36,380 --> 00:00:40,570 color and I'm actually going to just delete this entire body section here. 8 9 00:00:40,710 --> 00:00:47,120 I'm going to begin by having no styles whatsoever and I'm going to first specify the structure of our 9 10 00:00:47,160 --> 00:00:47,880 web site. 10 11 00:00:48,110 --> 00:00:52,520 Let's start off by recreating the content of this top part. 11 12 00:00:52,640 --> 00:00:59,210 So there is what seems to be an h1 and something that's just a paragraph just below it and then 12 13 00:00:59,210 --> 00:01:02,740 there's a few images and then we go onto the next part. 13 14 00:01:02,840 --> 00:01:05,380 So let's do that for ours as well. 14 15 00:01:05,420 --> 00:01:14,420 So let's go into the body and we're going to create an h1that's going to say ‘I'm Angela’, and after that 15 16 00:01:14,420 --> 00:01:21,860 we're going to create a paragraph that's just going to say ‘a programmer’, and let's hit save and let's 16 17 00:01:21,980 --> 00:01:23,000 check it out. 17 18 00:01:23,930 --> 00:01:24,640 So there we go. 18 19 00:01:24,650 --> 00:01:26,560 Looks pretty boring, right? 19 20 00:01:26,660 --> 00:01:29,580 And it looks nothing like this. 20 21 00:01:29,600 --> 00:01:38,180 So the difference here is that you see these two parts are kind of grouped together in what might be 21 22 00:01:38,240 --> 00:01:39,300 a box. 22 23 00:01:39,500 --> 00:01:45,860 And if you look at ours, and if I turn on Pesticide, which is a really really useful tool when you're 23 24 00:01:45,860 --> 00:01:47,210 debugging your CSS. 24 25 00:01:47,540 --> 00:01:52,670 Now you don't need to download it because I'm going to show you what I'm doing but if you want to have 25 26 00:01:52,670 --> 00:01:58,700 it as a tool then you just head over to pesticide.io and you can download and install it on Chrome 26 27 00:01:58,700 --> 00:02:05,900 for free, so you can see that what it does is that it highlights all of your HTML elements and essentially 27 28 00:02:05,960 --> 00:02:10,110 all of the boxes that are on screen. 28 29 00:02:10,160 --> 00:02:16,340 So as we mentioned before essentially all that we're doing when we're using CSS is we're specifying 29 30 00:02:16,340 --> 00:02:24,110 the style for how each of these HTML elements should be displayed and each element is basically just 30 31 00:02:24,170 --> 00:02:30,050 a box, so you can see that we've got a box up here which is the h1 and a box down here which is the 31 32 00:02:30,050 --> 00:02:31,110 paragraph, 32 33 00:02:31,300 --> 00:02:34,460 and that the box that's all around them is actually the body. 33 34 00:02:34,670 --> 00:02:40,640 And using Pesticide you can confirm this by holding down the control button and hovering over each section 34 35 00:02:40,640 --> 00:02:41,840 that you're interested in. 35 36 00:02:41,840 --> 00:02:47,750 So if I hover over here you can see that this is showing me that it's a paragraph element and up here 36 37 00:02:47,750 --> 00:02:48,850 is an h1, 37 38 00:02:49,130 --> 00:02:52,340 and in between and all around is the body. 38 39 00:02:52,340 --> 00:02:53,930 And that's what the blue line is. 39 40 00:02:53,930 --> 00:02:55,730 So this can be quite useful. 40 41 00:02:55,730 --> 00:03:03,950 Now what you might realize now is that we might want to have a box that's around this heading and the 41 42 00:03:03,950 --> 00:03:12,710 paragraph tag that we can expand its height and also push down our text to the center of it. So we can do 42 43 00:03:12,710 --> 00:03:14,190 this in a number of ways. 43 44 00:03:14,240 --> 00:03:20,340 But the way that I'm going to talk about here is an HTML element called the div.. 44 45 00:03:20,360 --> 00:03:29,540 So let's go back into our index.html, and I'm going to create a new element called a div and we're 45 46 00:03:29,540 --> 00:03:31,830 just going to ignore the class for now. 46 47 00:03:31,940 --> 00:03:40,130 This div is a special HTML element that allows us to divide our content up on our web site so that we 47 48 00:03:40,130 --> 00:03:44,120 can structure each div separately. 48 49 00:03:44,270 --> 00:03:47,260 Now by itself it doesn't do anything. 49 50 00:03:47,260 --> 00:03:54,590 So if I save this div here and I head back over to Chrome and I turn off Pesticide and refresh, 50 51 00:03:54,770 --> 00:03:58,350 you can see that nothing, absolutely nothing, has changed. 51 52 00:03:58,610 --> 00:04:03,940 And that's one of the reasons why we're talking about an HTML element inside our CSS module. And 52 53 00:04:03,950 --> 00:04:11,270 it's because divs amongst other things don't do anything unless you use CSS with it. 53 54 00:04:11,270 --> 00:04:18,590 So if we turn on Pesticide again you can see that this top part of the body has now got a little bit 54 55 00:04:18,800 --> 00:04:20,840 thicker of a line. 55 56 00:04:20,840 --> 00:04:28,460 And if you right click on it and try to inspect it then we can select that div over here inside the 56 57 00:04:28,460 --> 00:04:29,690 Elements tab. 57 58 00:04:29,900 --> 00:04:37,970 And if you scroll this graphic up you can see that it's showing you that it has a width of 1424 pixels 58 59 00:04:38,420 --> 00:04:43,530 and a height of zero pixels which is why we can't see anything. 59 60 00:04:43,550 --> 00:04:49,010 It's something that's 0 pixels high even though it has a width so it doesn't appear. 60 61 00:04:49,340 --> 00:04:52,530 Now what you see up here where it says the outline. 61 62 00:04:52,580 --> 00:04:58,580 Now this comes from Pesticide and that's trying to show you where that div exists even though it has 62 63 00:04:58,580 --> 00:05:00,010 no dimensions. 63 64 00:05:00,440 --> 00:05:02,720 Now if we turn it off then that goes away. 64 65 00:05:02,720 --> 00:05:05,060 And this is what our code actually looks like. 65 66 00:05:05,060 --> 00:05:12,920 So in order for that div to have a function or in order to do anything we have to use CSS. So let's 66 67 00:05:12,920 --> 00:05:21,050 select that div inside Chrome Developer Tools, and let's specify some CSS for it inside our Developer 67 68 00:05:21,050 --> 00:05:21,830 Tools. 68 69 00:05:21,830 --> 00:05:28,050 So remember anything that we specify here doesn't get saved and it's only purpose is for us to experiment 69 70 00:05:28,160 --> 00:05:29,790 and see it live immediately. 70 71 00:05:29,990 --> 00:05:34,870 So let's give it a background color of blue, 71 72 00:05:35,060 --> 00:05:36,060 my favourite color. 72 73 00:05:36,470 --> 00:05:38,650 And you can see nothing has changed. 73 74 00:05:38,780 --> 00:05:46,940 But if I give it a height of say 100 pixels then immediately you can see it now appears. 74 75 00:05:46,940 --> 00:05:48,980 And here is our div. 75 76 00:05:49,040 --> 00:05:50,690 This is where it is. 76 77 00:05:51,010 --> 00:05:54,330 And if you hover over it that's what's going to be highlighted. 77 78 00:05:54,410 --> 00:06:00,590 And if I turn on Pesticide again you can see now if I hold on control and hover over you can see that 78 79 00:06:00,590 --> 00:06:06,260 if I turn on control and hover over this section it's showing you this is the div, this is the h1 and 79 80 00:06:06,260 --> 00:06:12,590 this is the p. So the div is only there for you to structure and divide up your content. 80 81 00:06:12,590 --> 00:06:20,450 So if we wanted our div to perform a similar function to what we've got up here which is the top part 81 82 00:06:20,450 --> 00:06:27,890 of the content, where he's grouped together a title, a subtitle and an image, then we can do that using 82 83 00:06:27,890 --> 00:06:29,260 a div. 83 84 00:06:29,330 --> 00:06:34,460 Now remember what I said before about how the changes that you implement in the Chrome Developer Tools 84 85 00:06:34,670 --> 00:06:36,730 don't persist in your code. 85 86 00:06:36,800 --> 00:06:41,030 So if you check back in Atom you won't see any extra code being added. 86 87 00:06:41,240 --> 00:06:47,100 And if you refresh this site then all of those things that you entered inside here will disappear. 87 88 00:06:47,210 --> 00:06:50,140 So that's just for testing basically. 88 89 00:06:50,150 --> 00:06:54,550 So let's head back to Atom and let's do something with this div. 89 90 00:06:54,800 --> 00:07:02,990 So essentially a div stands for a content division element and it basically allows you to split up or 90 91 00:07:02,990 --> 00:07:09,430 divide your content into separate containers or boxes so that you can affect the layout of each box 91 92 00:07:09,520 --> 00:07:15,700 separately, so that you can say that maybe these two things should be grouped together, and I'm going 92 93 00:07:15,700 --> 00:07:24,280 to structure it and style it separately from other content in my web site. So divs, as we saw before, 93 94 00:07:24,280 --> 00:07:32,800 can have a height if you specified it using the styles but you'll also have a height if it has content. 94 95 00:07:32,800 --> 00:07:41,230 So if we go ahead and move our heading and our paragraph inside our div here and hit save, 95 96 00:07:41,560 --> 00:07:49,050 then you'll see that if we bring up the Chrome Developer Tools again that this div now has a height 96 97 00:07:49,150 --> 00:07:56,730 has a height of seventy six point something pixels and that's just enough to fit all the content that's 97 98 00:07:56,730 --> 00:08:00,050 inside, which is the h1 and the paragraph. 98 99 00:08:00,060 --> 00:08:04,280 Now let's give it a permanent background color so that we can see it more easily. 99 100 00:08:04,470 --> 00:08:07,980 And to do that we have to go into our stylesheet. 100 101 00:08:07,980 --> 00:08:15,300 But before we do that let's go to Color Hunt and find a good color that we might want to use. 101 102 00:08:15,570 --> 00:08:18,600 So I'm actually going to stick to the same color palette I had before. 102 103 00:08:18,630 --> 00:08:22,300 And so maybe something like this. 103 104 00:08:22,620 --> 00:08:28,470 And if we head back into Atom and go into our stylesheet, then we can select our div. 104 105 00:08:28,800 --> 00:08:34,380 And we're going to change its background color to that particular hex code. 105 106 00:08:35,280 --> 00:08:43,410 Now if we hit save and we go back to our web site and we hit refresh then you'll see that our div now has 106 107 00:08:43,500 --> 00:08:48,420 a background color and we can see that box of the div more clearly. 107 108 00:08:48,420 --> 00:08:56,750 Now the strange thing is, why does that div not go all the way to the end on the left and on the top? 108 109 00:08:56,790 --> 00:08:59,810 It sort of stops just about here. 109 110 00:08:59,910 --> 00:09:00,950 Why is that? 110 111 00:09:01,230 --> 00:09:07,700 Well, remember how we said that the browser inserts their own default CSS, the style things? 111 112 00:09:07,800 --> 00:09:13,880 For example how the horizontal rules should look like or how the h1s should look like. 112 113 00:09:14,310 --> 00:09:21,450 Well, if you take a look at the body element then you'll see that there's this user agent stylesheet 113 114 00:09:21,510 --> 00:09:27,180 which we know to be the default styles that are applied by the browser, and you can see that it has a 114 115 00:09:27,180 --> 00:09:31,730 margin of 8 pixels from all the edges. 115 116 00:09:31,770 --> 00:09:39,180 So if we change this, and we can do that just down here by double clicking on it and then let's enter 116 117 00:09:39,180 --> 00:09:39,980 zero. 117 118 00:09:40,140 --> 00:09:46,200 Now if I hit enter you'll see that that left margin now disappears. 118 119 00:09:46,200 --> 00:09:49,700 Now you might think that we can do the same thing with the top margin. 119 120 00:09:49,710 --> 00:09:55,650 So if I delete that and hit enter then you would think that maybe our div would go all the way up to the 120 121 00:09:55,650 --> 00:09:57,510 top, but it doesn't. 121 122 00:09:57,510 --> 00:09:58,860 Now why is that? 122 123 00:09:58,860 --> 00:10:04,650 Well, because there's also default rules for our h1. 123 124 00:10:04,800 --> 00:10:11,850 And as you can see, when I hover over the h1, it already shows you the entire space that it's taking 124 125 00:10:11,850 --> 00:10:15,880 up and you can see that, inside the user agent stylesheet, 125 126 00:10:16,050 --> 00:10:19,260 it’s got a whole bunch of default styles. 126 127 00:10:19,260 --> 00:10:27,770 For example, it says that it should have a margin-before, of this amount, and a margin-after, of this amount. 127 128 00:10:27,780 --> 00:10:35,400 So margin-before is at the top, margin-after is at the bottom, margin-start is on the left, margin-end 128 129 00:10:35,460 --> 00:10:37,080 is on the right. 129 130 00:10:37,110 --> 00:10:43,200 So this margin is what is responsible for that gap that we still have. 130 131 00:10:43,380 --> 00:10:51,060 So if I go ahead and change this to zero then you can see now our div is now sticking right to the top 131 132 00:10:51,300 --> 00:10:52,370 of the page. 132 133 00:10:52,440 --> 00:11:00,670 Now as you remember these changes, whether I edit it here or if I edit it inside the style section here, 133 134 00:11:01,080 --> 00:11:09,860 so I can say margin-right is zero pixels as well, 134 135 00:11:10,000 --> 00:11:15,740 then I get rid of that right little space, but remember none of this is permanent. 135 136 00:11:15,760 --> 00:11:23,740 So the challenge for you is to go and implement these styles in order to override the default browser 136 137 00:11:23,740 --> 00:11:32,030 styles and make our div go all the way to all three edges: the left, the top, and the right. 137 138 00:11:32,030 --> 00:11:34,990 So, pause the video and give that a go. 138 139 00:11:37,880 --> 00:11:44,950 All right. So all we need to do is just to transplant these changes we made here over to our stylesheet. 139 140 00:11:45,230 --> 00:11:51,350 So you'll notice that when I select for example the heading and I double click on the margin and I hit 140 141 00:11:51,480 --> 00:11:59,210 0 then you'll see that it inserts this line of code here where it says the margin top should be zero 141 142 00:11:59,210 --> 00:11:59,870 pixels. 142 143 00:11:59,930 --> 00:12:02,610 So I'm just going to do that again for the bottom here. 143 144 00:12:02,690 --> 00:12:03,810 I’m going to hit 0. 144 145 00:12:03,860 --> 00:12:08,990 And I want you to watch over here what shows up. 145 146 00:12:08,990 --> 00:12:14,460 It's written some more code telling us that the margin-bottom should be 0 pixels as well. 146 147 00:12:14,480 --> 00:12:20,330 So we now know what is the CSS that we have to write for our stylesheet in order for it to have the 147 148 00:12:20,330 --> 00:12:22,010 same appearance. 148 149 00:12:22,010 --> 00:12:27,230 So let's head over to our stylesheet and let's go ahead and select 149 150 00:12:27,230 --> 00:12:29,570 firstly the body element. 150 151 00:12:29,570 --> 00:12:34,180 And we're going to override that 8 pixel margin that it has. 151 152 00:12:34,250 --> 00:12:37,790 And we're just going to say margin is 0. 152 153 00:12:38,000 --> 00:12:45,800 And this means that all four sides is going to be set to 0 pixels for its margin property. 153 154 00:12:45,830 --> 00:12:51,230 The other one that we wanted change was the h1, and this one we don't really care so much about the 154 155 00:12:51,230 --> 00:12:59,660 other three sides. All we care is about the margin-top, and we want to set this to 0 pixels. So when it's 155 156 00:12:59,750 --> 00:13:03,050 0 you don't actually have to specify the unit, 156 157 00:13:03,050 --> 00:13:06,060 so pixels or whatever else it may be. 157 158 00:13:06,070 --> 00:13:13,520 So now go ahead and hit save and head back to our web site, and let's close this down and refresh, and 158 159 00:13:13,520 --> 00:13:18,170 you can see that our div now goes to all three edges. 159 160 00:13:18,170 --> 00:13:20,300 Now what is this diagram all about? 160 161 00:13:20,300 --> 00:13:24,840 It's got this margin border padding and all of these things. 161 162 00:13:24,950 --> 00:13:31,030 Well that's what we're going to dig into in the next lesson where we talk about the CSS box model. 162 163 00:13:31,130 --> 00:13:32,080 So I'll see you there.