- Whew all right.
Seventh inning stretch.
We're almost there.
Let's get out our muscles
goosy and let's jump,
let's get serious okay?
Let's just into this.
So what we wanna do is
come back to our project.
Hopefully you finished
out these links here,
and there all working for ya.
Here's my answer.
You can pause and take a peak
if you had a little troubles with that.
But yeah, everything
should be working good.
You may have noticed
that there's these little
underlines under here.
How do you think we can solve that?
Maybe you're thinking CSS,
and if you are that's correct.
CSS is gonna be the
style of how things look.
Remember html, our first
part of the process,
puts it all on the page,
and now we're gonna polish
it and make it look nice.
So that's what we're doing here now.
We're all CSS moving forward.
So to do our CSS in the first
project with party tips,
just watch along.
Just watch along.
In the first project, we did this thing,
where we put this style sheet,
remember these style tags?
And then we said something
like body, background,
just watch along.
Equals red.
And then bah, it turned red, right?
That's what we had going
on in the first video.
And that's okay.
I mean this is like an
okay way to do things.
But, I'm gonna show you a better,
more advanced way of
including CSS in your project.
Because this is like, at this point
a little bit of an older way of doing it,
of putting it in the page.
More modern web development
with more modern
web development, you wanna
put each of the coding
languages in their own file,
so that you keep them separate.
It's just a whole way of organization.
So that people can work on multiple things
at once, and we keep things organized.
So just watch along.
I can have this same effect, right?
Before I move this, by linking,
and that's what I did here for you.
By linking a separate style sheet
into the project.
And that's what we're gonna do.
I did it for you in this project,
but you can see it references style,
that CSS, in here.
And now if I put this
style, that CSS here,
just like that.
And save and refresh.
It has the same effect.
And we know it's working
if I change the color.
For example, boom, right?
It should turn green like that.
So we know that's working just like that.
It looks good.
(snaps)
Now the other thing you
have in your project,
are these comments.
I gave you some code in
your style, that's CSS.
So maybe you're like, yeah, yeah,
that's what mine looks like.
And good.
This is what you have.
So basically what you have in here
is just some comments.
These are comments that it
won't effect the site at all.
But they're just little notes
that you can put you know,
ownership of, or if the next developer
down the line works on a project,
you just have some notes of
where the thing came from.
And I also gave you some body styles
in here that we'll at at the end of this.
To make sense of that.
But I just wanted to illustrate for you,
I'm gonna save it like
this so you can go ahead
and do that.
I just wanted to illustrate for you
that we are doing
essentially the same thing,
but now we're linking
our CSS into the project.
And that's really exciting,
'cause we can work now in just
these two folder like this.
Okay, so I'm gonna save and refresh.
Here we go, here we are.
And we're gonna go step by step
through styling this project.
Now for this we're gonna need that design.
That original design that I showed you.
This one here.
'Cause we're gonna need to talk
through it and say what do we wanna do.
Well now the first thing I see
in my design is the white
big letters of cookie, right?
And then we have white text here and...
Okay, I'm thinking aloud.
I think maybe the first thing we should do
is define this black box.
I think we should do that first.
Think that would make sense.
That black box is known as a container.
All websites have them.
The container, if you look at like Zappos
or something again.
The container is really just the center
of where the content is.
See if I zoom out a lot you can see things
are actually centered in a box.
Almost all websites
have this kind of style.
A few that don't, call it fluid.
That's it's 100%, and it doesn't have it.
But most do.
If you start looking around you'll notice.
Zoom out a little bit.
Things are in boxes.
Things are in containers.
And so, we're gonna make a container.
We're gonna put things
in this neat little box
here like that.
And let's go ahead and do that.
So to do that, we want to,
remember we can target things here.
I can say h1 be black, h2 be white, right?
We can do the same thing with an id.
And this id is basically a special name
that I made up.
I put the word container here.
And let's just do it first
and then we'll talk about it.
So, what we need to do
is we need to do this,
container in your CSS.
Go ahead and follow along.
And we're gonna say container
+ background equals black.
Like that.
Give that a second.
Give that a try.
And now we refresh, boom.
You'll see everything in
this box has become black.
Okay, well what is that box?
Well that box that I made for you,
is everything basically on the page right?
Everything inside the
body is now in this div,
this division right?
Everything's in there.
And that's all black.
That's exactly what we said we'd do.
Well why make that?
Because we can give it
some cool characteristics.
So for example I can move that
box around the page, right?
Like have a sidebar, or header.
I can do anything with
that box that I want.
In this case, what you're gonna do now,
is you're gonna give that box a width,
check this out.
We'll do a width of, no just pick a number
that sounds, 400 pixels.
Boom.
And now we're moving that
box and shaping it up, yeah.
And I can say okay, backgrounds black,
width is looking pretty good right there.
What if I wanted all the text in that now,
'cause I can't read that text,
to be white?
How would you do that?
Hopefully you're remembering,
you do color=white, like that.
And now we're making some
quick strides, right?
Looks pretty good.
Okay.
So I thinks that's our first step,
is getting that going along.
The next thing I wanna do is get this text
to be a lot larger.
Here you notice it's quite large, right?
So to do that we're gonna
target which html element?
but the h1, h1.
And for that, just follow along.
We're gonna do this and
we're gonna make a font size,
is what it's called.
The property is called font-size.
And you know we can just pick a number
that feels good.
We'll say 50.
So 16 is the default.
So 50's like bigger.
So we'll say 50.
Looks pretty good.
Maybe I'll even make
it a little bit bigger.
We're just gonna have some fun with it.
Let's say like 80.
Cool, you know.
Whatever feels right.
Let's try to get things
pretty good in this lesson.
Looks pretty good.
I like it.
All right.
We're just gonna go step
by step through our design.
Where are we going, where are we now?
Well, we wanna go to a
place where the background
on this h2 is blue, and the text is black.
Let's code that.
You should know how to do that by now.
So, we know that's an h2 right,
because we have it here.
We said it's an h2, a heading two.
And so we say h2.
What did we say again?
We said the background
on that's gonna be blue.
Background blue.
Okay.
And the font or color
right, is gonna be white.
I don't know silly it's already white.
We want it black.
Black and white
Black and white
Black and white
Black and white.
There we go.
All right.
Now what did we notice here?
What are we noticing?
You may notice that the color blue here
is different than the color blue.
How do you say this
color blue specifically?
That's what I wanna show
you in the next video.
I'm gonna talk about
choosing digital colors.
And how you can arrive at the
exact color that you want.
So get this far with your project.
Copy along on my code
and in the next video
I'll talk about that.