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