Hi, everybody, welcome back.
Once again, I'm gonna ask you to stop learning and start coding and practicing.
And we're gonna use the same example we used in our first coding break.
So I wanted to show you what our old page was, right here.
And see how we can change it into something that looks a little bit more
like our new page over here,
where we've been implementing some of our margins, paddings, and widths and heights.
All right, so let's go ahead and get started.
The first thing I wanna do is use the exact same style sheet I used for
the first one.
There's absolutely no need to recreate your style sheet when you can either just
use this one and amend it, or if you'd like, use two style sheets.
I'm gonna use just one.
And the first thing I'm going to fix is the fact
that I made what you might call a mistake in my earlier version.
I have two rules styling h1.
That's not a problem.
The browser will apply all these styles.
But what I really meant to do was I meant to style the body tag.
So, let's take a look at what it looks like right now.
And let's go back to our current version.
And there we go.
That already looks a little bit better than what we used to have.
All right, so now that I'm on a good starting place for when I start,
let's talk about the different things we can style in our page, all right?
One of the first things I wanna do is I wanna add a little bit of
margin to my page.
If you look over here, there's not much space between the edge of the page and
the actual browser.
I wanna add just a little bit.
You can add a little bit, you can add a lot.
In fact while we code today, I'm gonna add a lot, just so you can see the effects.
So how do you do that?
How do you add that space between the element and its neighbors?
You go in and we're going to add a margin.
And, like I said, I think I’m gonna make it a little bit more pronounced than in
the code I showed right there.
I’m gonna go ahead and make it 4%.
So when we do this, I’m gonna go back to the page.
I’m gonna reload.
And you can see everything is kind of moved in, all right?
Margin just adds a little space and makes it more visually appealing to your users,
all right?
Let's think of some other things that we wanna do.
Clearly I probably wanna add a little bit of space between
my links and the bottom of the text.
So this is a little bit different.
I'm not saying to separate the elements,
I'm saying I need more space between my border and the element itself.
So in that case, what we wanna use isn't margin, we want to modify the padding.
So let's go in and see where we think we would do that.
All right, so I need to add padding inside the whole header.
So let's go right here and
I'm going to change it to, padding, again you can pick anything you want.
You can use pixels, you can use percents.
I'll go ahead in this case, I'm just gonna put in pixels.
And I'm gonna say please add 15 pixels of space between the border and the bottom.
So, refresh, oh, make sure I save.
And refresh, and
you can see I've added padding all the way around the entire thing.
If I really only wanted padding to be on the bottom,
I could have said padding bottom, or padding right, or padding left.
All right, let's go ahead and style something else.
One of the big things I changed is that instead of having
one underneath each other, I've changed these so they're next to each other.
So remember, by default, sections are block, they're display block,
which means don't let anyone else come next to me.
In order to change it so
they're next to each other, we can either use inline or inline-block.
Almost always when given this choice, you're going to use inline,
because when you use inline, you can include a height and a width.
All right, go back to my CSS file.
I don't wanna change the header.
I think I'm pretty good with h1.
The nav, the h2, oh, you know what?
I don't have anything that I can change here, so let's go ahead and
put in a new tag.
Section, all right, I want all three of these sections next to each other.
So what I could do is I could pick maybe 400 pixels each.
Well, that would mean that the browser has to be at least 1,200 pixels.
I could pick 150 pixels each.
Well, that means they're gonna be really skinny even if they don't need to be.
So let's use percentages.
I'm gonna use 30%, not 33%, because I wanna give a little bit of elbow room for
paddings, margins, borders, etc.
All right, let's go ahead and look at it right now, I wanna see what it looks like.
You can see I've made it 30%, but they're still not next to each other.
That's because they're still block.
Let's change them to inline-block, Display.
And let's hope for the best.
There we go.
I've got all three things next to each other.
Still not looking exactly the way we want, but it's step by step.
It's making this little bit of progress at a time.
I'm gonna go ahead and fix this fact that they aren't all lined up at the top.
And I'm gonna say float: left; refresh and we're getting closer,
we're getting closer, but there's something still a little bit wrong here.
First, they're squished.
I don't like them all squished together.
So how do you separate different elements from each other?
How do you add a little bit of space between elements?
All right, if we were in class, I'd have that one student that's like ooh, ooh,
I know, yes, it's margin, all right?
Margin, I'm only gonna put a margin on one side, let's say margin-right.
And I will make it something small like 2%.
All right, we're getting closer.
We're getting closer.
Still not quite what we wanted, but this is how it works.
You add a little bit.
You adjust.
You add a little bit.
So one of the big problems here is that when you float things to the left, or
when you float things,
once you're done floating when you don't want those next elements to float.
You actually have to go in and say, oh, but I don't wanna float this part.
So once we're done with these three sections,
we don't want the footer to also be have them next to them.
So let's go in and adjust the footer code.
Down here.
All right, if you remember if you don't want things to float next to you,
we're going to use clear: both,
which means don't let anything float on either side of me.
Oh, much better, right?
It looks much, much better.
And other than the fact that I've got weird colors,
we're very close to right here.
I actually kinda like the gray on the header and the footer so
I'm gonna leave it.
But what I do wanna do, is I wanna make that picture smaller.
This little icon right here, let's make it look a little more like this.
And that's very simple for the approach we're gonna use right now.
Let's go ahead.
I'm going to add an image.
And I'm gonna go ahead and just hard code it right now.
So, I'm gonna make it 75 pixels.
Oops, gonna have to say width:75px.
Let's take a look at how we did.
Yeah, that looks okay.
If I didn't like it and I wanted to play with it, I wouldn't go in here and
try 100 and then 80 and then 52.
What I would do is I'd go in here and do Inspect Element again.
And I would, oh, make this much bigger cuz otherwise everything looks really crazy.
And I would go into the image and
I'd say, okay what does it look like if instead I make it 150 pixels?
Does that look better?
Or oops, don't wanna do that.
Or what if I make it 125 pixels?
Do I like that?
Pick a value you like, and
once you find something that looks good to you, copy that value into the style sheet.
Cuz if I refresh it right now, my inspect element values go away.
All right, let's go in here, fix it, save it, and refresh.
All right, so this is great,
these are the types of things I want you doing in this class.
I want you grabbing an HTML file and saying ooh, can I change this around?
What can I do to make it different?
Clearly, this page we've created right here isn't a finished product.
It's not exactly how you'd want it to be out there on the web.
So we're going to keep learning new things and
we're going to keep styling things in different ways.
And as you keep practicing, you're confidence and
your ability is really going to grow.
And that's what I want.
I want your confidence to be very,
very high by the end of week four that you can do this.
So good luck.