- For this we have the title h1
and we want to add the sub-titles
which is gonna be the h2 tag.
Oop, like that.
So what are the h2s here.
Well they're our party tips.
So we have party tip number one.
Just follow along.
Party tip: crash parties.
I forgot my number.
H2 close, h2.
Let me bring that out a little
so you can see what I did.
Yep, so we have that and
I'll just keep typing
and you're gonna follow along.
H2, right.
Party tip number two.
Party tip was party hard of course.
Close that and party tip number three,
let me just do h2 tab to make
that one a little easier.
And party tip number three which was, aha,
kiss your own arm or leg do it now.
You will feel good about yourselves.
As well as at the bottom
we'll give the credit to party tips
by Andrew W.K. close.
Take a second to get caught up.
I know I type fast that just
gives you a second to pause
and get caught up.
And like I said we code
and then we talk about it.
All right, now that you're
here hopefully you saved
your code and refreshed it
and you should see this here.
Let's talk a little bit about what we did.
Now we started with this h1 tag.
On every site on the Internet,
the ones that are coded well,
the h1 is gonna be the title tag.
Number one meaning it's
the most important header
of the site.
Usually it is the title of what it is.
You can go look at
Huffington Post or Zappos
or whatever site and
the h1 should be that.
It's really good for
search engine optimization.
SEO meaning rankings in Google
have a really clear h1 tag.
As is the title tag, the
title tag also describes
what the whole page is
and what's the difference?
The h1 is what's in the body
so it's what you see on the site.
That title tag is what shows up here
which you've probably
seen this before right?
What's up here if you minimize the site
sometimes it shows up at the bottom.
That's the title.
These are both really important
for getting your rankings improved.
You might want to look at
your company's site right now
and see what's in there.
Having things like if
it's a New York company,
New York based in there or
any kind of really specific
keywords helps with the h1 and the title.
And that's what we're learning here.
Now beyond that the
number two is basically
all of these things are
second most important.
Now there's no super duper
science to how this works
but h2s tend to be things
like blog post titles.
If you go to a blog h1
is usually the title
and then every h2 is gonna be the
header of the blog post
title or something like that.
They go h1 through h6 in importance.
And just try your best and start
to get familiar with these.
Don't over think it.
So far for here we have the
h1 and then a bunch of h2s.
They're the similar weight of importance.
We also have this P tag
which you might have guessed
is just paragraph text.
Just general paragraph
text that's on a page.
And we put that down below where
we're giving the credit
for the party tips.
Now one thing that's a
little bit weird about this
that you might have
noticed is that the white
is on the header, the h1 but
not on the rest of the page.
There's a way that we can write our CSS
a little more effectively
to have this here affect
everything with the same amount of code.
Can you take a guess of what that is?
If you look at this here.
What it would be, I'll give you the hint
or I'll tell you the answer.
Right now we're only targeting the h1.
See how when I click on this
these two even highlight.
But if I want everything
in the body to be white,
what would I do?
Well I'd put the same
thing here on the body.
Cool, so actually I could
just remove this one here
on the h1, just remove that.
Get rid of this line and
put that here instead
and boom everything becomes colored.
I don't need to have it twice
because the h1 is part of that body.
And this is why CSS is called
cascading style sheets,
that's what it stands for.
Because it's like a cascade,
it reads from top to bottom.
So we have the body, we're
saying the body color is white.
Now from top to bottom if I wanted the h1
to be a different color
than all the other things
in the site this is where
the cool magic comes in
where you can override things.
I can say color equals, I
don't know green or something.
And now what do you think is gonna happen?
What do you think is gonna
happen when I refresh?
Boom, just like that.
Cause we're saying here
everything in the body is white.
Everything except the h1 is green.
Let that sink in for a
second or play with it a bit
if you want to get familiar.
But that's what the CSS,
cascading style sheet part stands for.
And it's a really powerful
language for coloring
and shaping the way our html looks.
All right, hopefully this
has been great for you.
Let's go to the next video
where we finish off our project
using the images that I'm gonna give you
and we'll put them on the site
and clean it up.
I'm also gonna get rid of this green
cause it's gnarly.
Blue and green together, not looking good.
Not looking good.
Ah, much better.