- We are gonna finish off
the CSS in this video,
let's get going.
We have this much going on, and the things
we need to do now are,
change the link colors here,
get rid of that little
underline thing there,
and then just kind of add
some padding to make it,
you know, look a little better.
You'll see what that is.
And put the image in the background.
So there's a few steps,
I'm talking through it
just so you start to
recognize what we need to do.
And let's go through that step-by-step.
Alright, so the first thing is,
let's add the color to the A H ref here.
I'm gonna have you do
this yourself right now.
Go ahead and see if you can figure out
how to make this color of this
text here the same as this.
Do that right now.
- [Boy In Blue Shirt] We
should totally hit it again,
but I get first dibs on it.
(man in yellow rapping)
(boy in blue shirt joins in rapping)
- Alright, what you
should've done is added the A
because you're targeting the
link is between the A tags,
and all you needed to do is say the color
is the same color as it is for this.
So that makes it a small code.
And that's what's going on there.
In addition, I got rid of that underline,
because it was kind of gnarly.
We don't want that.
It's fine, you can have it
if you want, but I don't.
You know, I think it
looks better without it.
So text dash decoration none
will remove underlines from links.
Okay, hopefully you're following along.
Now what does that mean?
If you remember we have these
little underlines here too.
Look, they went away as
well, because when we say,
remember those little underlines?
The browser will automatically
add those underlines,
and by just saying text decoration none,
we get rid of it on our links.
And so it's a nice way to clean that up.
So that's what's going on there.
Looking pretty good.
We can add some padding to
kind of add some space here.
Check this out.
We have this here, but if I wanna just
add some this here, that will be padding.
And all that is gonna
be, is on our container,
right around here, I can add some padding.
And what am I gonna do?
Let's say add, I don't
know, five pixels padding.
Everything's in pixels, right?
That looks pretty good.
Maybe add a little bit more, I don't know.
Let me see, what did I end up choosing?
I chose 15, we could do that.
Whatever feels good.
Play with it, whatever you like.
And then let's also add
some padding to the H2.
I mean I think there's
somewhat of an art to this.
You just have to decide what feels right.
Sometimes if you have a big client,
you might have a strict
deadline, and may not be perfect.
You know, like perfect point perfect,
but I think a lot of times
there's a little wiggle room,
and you can just make things and work
with a designer to make things look good.
So we have that, and
that looks pretty good.
And I also have this
effect that's pretty cool
where you can round the edges,
it will just soften that H2 border there.
And what that's gonna be
called is border radius.
Yep, border radius.
We'll make that five pixels as well.
And it'll just kind of
soften the edges there.
Yeah, so thing's are looking pretty good.
So for the most part, we have
the entire container designed,
and now we just need to
slap Cookie Monster's face
on his portfolio in the back.
So the way we do that is
it's on the body, right?
We want this big image on the body.
And it's gonna be
different than with HTML.
When we do HTML images, that's
one way we include images,
we use this IMG tag.
Just watch along right now.
There's another way that we can
include images for background images.
And that's with CSS.
And to do that, all you need
to do is just say background,
well remember, we know the background tag,
we wanna make it green, it's the same tag.
Now instead of giving it green,
instead of passing it green,
we can just give it an image.
And the way we do that is URL,
just follow along and
then we'll talk about it.
Just like that.
And that is the final,
oh it's the worst.
It happens to me too, guys.
It happens to me too.
What did we do wrong?
What's going on here?
(laughs)
And that is the final step.
Cookie Monster images, URL, huh.
Everything looks good there.
I'm very confused.
This happens.
Oh, I spelled Monster wrong.
(groans)
Did you see that before I saw that?
Did you see that?
(laughs) It happens.
Coding, man, is all about debugging.
It's all about the pain.
So that looks good now.
We have our Cookie Monster showing up.
So the reason, I'll just give you a brief,
the reason we have to go dot
dot here, is it goes back,
so we are in this
folder, we need to go up.
Check it out, we need to go up,
out of the CSS folder and
into the images folder.
And this is more or less,
it's a more advanced path.
Like URL setting up paths.
Which we do in more advanced
classes here in one month.
But I'm just giving you a taste of it.
So this back back dot mean
come out of the CSS folder
and go into the images folder.
Wonderful job!
If you got this far, you
just knocked down a ton
of HTML and CSS in a really
short amount of time,
and I hope you're feeling
proud of yourself.
This is great.
I'm gonna give you a challenge
for your homework this week.
And that will be in the next video.
So come on, get the challenge,
and let's finish off this week strong.