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.