Welcome back, everybody. It's time for
us to stop learning new things and put into practice the things that we've
been talking about in the last week. What we're gonna do is add some of the new
components that we've been working on. But we're gonna do it together as we code
along, so again I'm going to stress that I really hope you stop, put down whatever
else you're doing, whip up your laptop or whatever you're coding on, and code with me rather than just
watching what I'm doing. When we last were coding together, hopefully you created something that
looks like this screen over here. We've gone in and we'd used width and
different displays, padding and margin and we were
making our page a little bit better. Today, we're gonna go a step further and
add some different elements such as gradient, instead of having three
equal width sections we're gonna have some sections take up half the page, some take
up the full page, little things like this. And we're going to be utilizing these
new selectors that we've been studying. So, let's go ahead and begin. The first thing that I wanna do
is put in that linear gradient or that new color that goes in
both the header and the footer. So when I go to my style sheet,
and I'm gonna come up here. One of the first things I want to do
is I want to put in that we need a new background for the header and footer. And I'm going to start by
putting it right here. I know I cheated, I copied and pasted. But I wanted to do that, sorry. I wanted to do that, because I
kept messing up when I was typing. So, what I've put in here, is I've started
off by putting in a background color. You always want to do that,
because if you don't, if for some reason the browser can't handle linear gradient,
you've given it a fall-back. Then, I've had my linear gradient rule
in each of the different webkits. So once I add that and I hit save,
we can refresh the page and see if we have that kind of gray
to blue color we were looking for. Hey, great, we did. Now, when I wrote this rule,
you might remember that I put header, footer and that means it's supposed
to apply to both of these elements. But it only applied to the header. We need to think about why that happened. The reason is if we scroll down,
you can see that further down in the page I have said, I want my footer
background to be this particular color. This overwrites any earlier rules,
so I'm gonna go in here. And I'm going to delete this,
and say, let's get rid of that. Refresh, and great. Now it looks much better. Okay, so we've made that one change, and
hopefully you're getting used to the idea of both using the comma to style two
elements at once, you can do even more and putting in these web kit prefixes or
browser prefixes. If you get rid of it,
it may work on your browser, but there's a really good chance it
won't work on the other browser. So we wanna practice this. All right, let's take a look and
see what we've got. I've got the gradient in. The next thing I wanna tackle
is styling these links, and again, I'm not styling all
the links in the page, cuz if you notice, this one down
here still looks exactly the same. I only want to style the links that
are inside the navigation section. So, I'm going to go right here and,
I've styled my nav. It looks good. Next time, I'm going to say, hey, let's style just those
links that are inside the nav. And, we've made quite a few changes. If I come down here, we can see it. One we've added something that looks
kind of like a box structure to it. Normally you couldn't do this because
in line elements don't take a width and a height but, we'll go ahead and
play with it. Let's go ahead and start, I'm gonna first
say I would like the width of each one of my links to be about 22%, save this. Refresh, nope no luck. So again, remember, one of the things
I said is that links are inline and you can't give them width or height. So now, if I go in and
I say let's change our display to inline-block, we should
have much better luck. Almost too much luck,
cuz the screen doesn't quite fit that. All right?
All right. So great, that's one step closer. Let's add that different background color. And I think I made it white. But you can use anything you want. Boom. We're definitely getting closer. Little tiny steps are getting us much,
much closer. So, the next thing I wanna tackle
as we try to change our page is this idea that some of the sections
should take up half the screen, while some of the sections should go ahead
and take up the whole width of the screen. And the way we're gonna do
that is by using classes. If you remember, classes are a way to style certain
groups of elements in similar manners. So let's go ahead and
see how we're gonna do this. The first thing I need to do is make
a new class, and this class is gonna say, instead of all the sections taking up 30%,
I want just some of them, I'm gonna call them half to take up about,
let's say 45% of the page. In this way it's only gonna pick up
some of the sections, not all of them. If I refresh, it's not going to work yet
because the problem is I got rid of my section styling and
replaced it with this class and nowhere in my HTML did I
remember to reference the class. So for the first time we're now
gonna go into our HTML file and start making some changes. Gonna go here, I would like this one
to only take up half the screen, so I'll say class=half. And I would like this one
to take up half the screen. We've got that. We're not gonna change the other one, so when I refresh, you can see that two
of them are now next to each other. So when I have and refreshed it looks
a little bit closer, other than I've got some weird things going on with
some blue and different things. So this is because I've been using float. And if you remember, when you're using
float sometimes it causes things that are next to each other to be basically in
positions you don't want them to be in. So our bottom section, the one that we
knew we didn't want to be floating, we need to go in and say hey, there's
certain sections we want to be whole. So let's go back to our style sheet. And I'm gonna just do a little
bit of copy and paste here. And I'm gonna say, you know what? This one section,
I need it to be class equals whole. So go back over here. Section class = whole which means this
one should take up the whole width, don't try to float it next to each other. And let's go ahead and refresh. That looks much better. It looks very much like we
wanted things to be at the end. And again, pay attention. Only the nav links are styled,
not all of the links. We've put in the gradient. If your gradient isn't working, it might be because you didn't
put in your browser prefixes. We've really got a lot of little
things going on in this page. And again, I'm not a graphic artist, so
I don't make the most beautiful things. But it's kind of fun to go in and
create different things and see how you can style them yourself. So, keep going and good luck and
don't worry when you hit those typos. We all do.