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.