Original subtitles

So in the last lesson we've started this brand new project where we're going to recreate a professional

web designer’s personal site, and we're going to make it look as beautiful if not more beautiful than

what we see here.

So we started off strong by adding a favicon to our web site, but our web site is right now just a blue screen

which is not that professional and not that pretty.

So let's go ahead and change it.

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

color and I'm actually going to just delete this entire body section here.

I'm going to begin by having no styles whatsoever and I'm going to first specify the structure of our

web site.

Let's start off by recreating the content of this top part.

So there is what seems to be an h1 and something that's just a paragraph just below it and then

there's a few images and then we go onto the next part.

So let's do that for ours as well.

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

we're going to create a paragraph that's just going to say ‘a programmer’, and let's hit save and let's

check it out.

So there we go.

Looks pretty boring, right?

And it looks nothing like this.

So the difference here is that you see these two parts are kind of grouped together in what might be

a box.

And if you look at ours, and if I turn on Pesticide, which is a really really useful tool when you're

debugging your CSS.

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

it as a tool then you just head over to pesticide.io and you can download and install it on Chrome

for free, so you can see that what it does is that it highlights all of your HTML elements and essentially

all of the boxes that are on screen.

So as we mentioned before essentially all that we're doing when we're using CSS is we're specifying

the style for how each of these HTML elements should be displayed and each element is basically just

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

paragraph,

and that the box that's all around them is actually the body.

And using Pesticide you can confirm this by holding down the control button and hovering over each section

that you're interested in.

So if I hover over here you can see that this is showing me that it's a paragraph element and up here

is an h1,

and in between and all around is the body.

And that's what the blue line is.

So this can be quite useful.

Now what you might realize now is that we might want to have a box that's around this heading and the

paragraph tag that we can expand its height and also push down our text to the center of it. So we can do

this in a number of ways.

But the way that I'm going to talk about here is an HTML element called the div..

So let's go back into our index.html, and I'm going to create a new element called a div and we're

just going to ignore the class for now.

This div is a special HTML element that allows us to divide our content up on our web site so that we

can structure each div separately.

Now by itself it doesn't do anything.

So if I save this div here and I head back over to Chrome and I turn off Pesticide and refresh,

you can see that nothing, absolutely nothing, has changed.

And that's one of the reasons why we're talking about an HTML element inside our CSS module. And

it's because divs amongst other things don't do anything unless you use CSS with it.

So if we turn on Pesticide again you can see that this top part of the body has now got a little bit

thicker of a line.

And if you right click on it and try to inspect it then we can select that div over here inside the

Elements tab.

And if you scroll this graphic up you can see that it's showing you that it has a width of 1424 pixels

and a height of zero pixels which is why we can't see anything.

It's something that's 0 pixels high even though it has a width so it doesn't appear.

Now what you see up here where it says the outline.

Now this comes from Pesticide and that's trying to show you where that div exists even though it has

no dimensions.

Now if we turn it off then that goes away.

And this is what our code actually looks like.

So in order for that div to have a function or in order to do anything we have to use CSS. So let's

select that div inside Chrome Developer Tools, and let's specify some CSS for it inside our Developer

Tools.

So remember anything that we specify here doesn't get saved and it's only purpose is for us to experiment

and see it live immediately.

So let's give it a background color of blue,

my favourite color.

And you can see nothing has changed.

But if I give it a height of say 100 pixels then immediately you can see it now appears.

And here is our div.

This is where it is.

And if you hover over it that's what's going to be highlighted.

And if I turn on Pesticide again you can see now if I hold on control and hover over you can see that

if I turn on control and hover over this section it's showing you this is the div, this is the h1 and

this is the p. So the div is only there for you to structure and divide up your content.

So if we wanted our div to perform a similar function to what we've got up here which is the top part

of the content, where he's grouped together a title, a subtitle and an image, then we can do that using

a div.

Now remember what I said before about how the changes that you implement in the Chrome Developer Tools

don't persist in your code.

So if you check back in Atom you won't see any extra code being added.

And if you refresh this site then all of those things that you entered inside here will disappear.

So that's just for testing basically.

So let's head back to Atom and let's do something with this div.

So essentially a div stands for a content division element and it basically allows you to split up or

divide your content into separate containers or boxes so that you can affect the layout of each box

separately, so that you can say that maybe these two things should be grouped together, and I'm going

to structure it and style it separately from other content in my web site. So divs, as we saw before,

can have a height if you specified it using the styles but you'll also have a height if it has content.

So if we go ahead and move our heading and our paragraph inside our div here and hit save,

then you'll see that if we bring up the Chrome Developer Tools again that this div now has a height

has a height of seventy six point something pixels and that's just enough to fit all the content that's

inside, which is the h1 and the paragraph.

Now let's give it a permanent background color so that we can see it more easily.

And to do that we have to go into our stylesheet.

But before we do that let's go to Color Hunt and find a good color that we might want to use.

So I'm actually going to stick to the same color palette I had before.

And so maybe something like this.

And if we head back into Atom and go into our stylesheet, then we can select our div.

And we're going to change its background color to that particular hex code.

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

a background color and we can see that box of the div more clearly.

Now the strange thing is, why does that div not go all the way to the end on the left and on the top?

It sort of stops just about here.

Why is that?

Well, remember how we said that the browser inserts their own default CSS, the style things?

For example how the horizontal rules should look like or how the h1s should look like.

Well, if you take a look at the body element then you'll see that there's this user agent stylesheet

which we know to be the default styles that are applied by the browser, and you can see that it has a

margin of 8 pixels from all the edges.

So if we change this, and we can do that just down here by double clicking on it and then let's enter

zero.

Now if I hit enter you'll see that that left margin now disappears.

Now you might think that we can do the same thing with the top margin.

So if I delete that and hit enter then you would think that maybe our div would go all the way up to the

top, but it doesn't.

Now why is that?

Well, because there's also default rules for our h1.

And as you can see, when I hover over the h1, it already shows you the entire space that it's taking

up and you can see that, inside the user agent stylesheet,

it’s got a whole bunch of default styles.

For example, it says that it should have a margin-before, of this amount, and a margin-after, of this amount.

So margin-before is at the top, margin-after is at the bottom, margin-start is on the left, margin-end

is on the right.

So this margin is what is responsible for that gap that we still have.

So if I go ahead and change this to zero then you can see now our div is now sticking right to the top

of the page.

Now as you remember these changes, whether I edit it here or if I edit it inside the style section here,

so I can say margin-right is zero pixels as well,

then I get rid of that right little space, but remember none of this is permanent.

So the challenge for you is to go and implement these styles in order to override the default browser

styles and make our div go all the way to all three edges: the left, the top, and the right.

So, pause the video and give that a go.

All right. So all we need to do is just to transplant these changes we made here over to our stylesheet.

So you'll notice that when I select for example the heading and I double click on the margin and I hit

0 then you'll see that it inserts this line of code here where it says the margin top should be zero

pixels.

So I'm just going to do that again for the bottom here.

I’m going to hit 0.

And I want you to watch over here what shows up.

It's written some more code telling us that the margin-bottom should be 0 pixels as well.

So we now know what is the CSS that we have to write for our stylesheet in order for it to have the

same appearance.

So let's head over to our stylesheet and let's go ahead and select

firstly the body element.

And we're going to override that 8 pixel margin that it has.

And we're just going to say margin is 0.

And this means that all four sides is going to be set to 0 pixels for its margin property.

The other one that we wanted change was the h1, and this one we don't really care so much about the

other three sides. All we care is about the margin-top, and we want to set this to 0 pixels. So when it's

0 you don't actually have to specify the unit,

so pixels or whatever else it may be.

So now go ahead and hit save and head back to our web site, and let's close this down and refresh, and

you can see that our div now goes to all three edges.

Now what is this diagram all about?

It's got this margin border padding and all of these things.

Well that's what we're going to dig into in the next lesson where we talk about the CSS box model.

So I'll see you there.