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