- Alright, let's add some
CSS to our project here.
We've written out this HTML
which is the structure of the page.
It just puts this text on the page,
and now we're gonna write some CSS.
Which is gonna be the style.
Style meaning the color,
sometimes it's the layout,
sometimes it's the fonts we use.
All that kind of the style,
the design of the site.
To do that, we're gonna go
up into our head area here.
Our CSS will go in the head.
And we do it using these style tags.
So opening and closing style tags.
And let's just follow along here,
and then we'll talk about it.
So what we got is, I'm
gonna do background,
ah man actually I screwed up.
Body like that equals background blue.
Give that a shot, save this, and refresh.
And let me know what you see.
What you should see if
you refresh is this here.
The site background turns blue.
Now why did that happen?
Well, pretty clearly
because we told the site
the background is blue.
CSS like I said is the style,
it uses the style deal here.
And what it does is it
targets different part
of our HTML code, and
like I said, colors it,
gives it fonts, moves it
around, that kind of thing.
So what we're doing here with our CSS,
you can see it's a little
bit different than the HTML.
Because with the HTML,
we have tags that have
this kind of opening and
closing brackets, right?
We call these the elements.
But with CSS, you have this
slightly different syntax or style.
Where it's like these curly braces.
And you know what, it's just something
you have to get used to.
You do enough, and it makes
sense, but they work together,
as you can see here in this project here.
And we target the body,
and we basically say
everything between the body
tag opening and closing,
make the background blue.
Pretty cool, right?
And we always want to
end with a semicolon,
which says this line is over.
We can write some more CSS
if we wanna do other things
like color this text here.
Right now it's black, and it's
a little bit hard to read.
Now what if we wanted to make that white?
How would we do that?
Well again, we just
wanna target the element
that the thing is between.
The text that I'm referring to here is
between these h1s,
which is the header one.
And so I just have to type h1
and follow the same pattern.
The curly braces here, and
for this I would say color,
color equals let's say white.
And now if I save and refresh, boom,
our color is white there.
So that's really all there is to it.
Now I didn't invent CSS or HTML, clearly.
Sometimes teachers kind of pretend
like they are the holders of knowledge.
I really want you to be free
to figure this out when I'm not around.
So any of the things you're
really learning in this course,
you can learn more about by just googling.
If I were to type, probably
if I were to just type
font color CSS like that, I
will probably, literally get,
just click on the first link
that's here, the answer.
So use color equals blue if
you wanna change the color.
Almost anything that you
can question and think up,
you can probably solve
by just googling, right?
There's a skill, googling is a skill.
I heard someone say 70% of
being a developer is googling,
well here's your chance.
So what if I wanted to
say font size bigger CSS,
how do you do that?
And I could click on the first link,
a variety of different sites come up,
well there's a font size.
Let's see if I use that what happens.
And if I make my font size, if I just add
that declaration there, and
then you would do it in pixels.
Let's say 80 pixels, boom,
it makes it a lot larger.
Pretty sweet, huh?
So a lot of these things
that I'm teaching you,
I want to empower you
to go one step further,
and to use your imagination
of how you wanna style these,
and make these things looks good.
So yeah, that's a primer on
some really basic CSS in HTML
to show you how the
styles and the structure
of the page are always working together.
In the next video, I'm gonna introduce you
to two more HTML tags and show you a way
to improve the CSS that
we're writing right now.
So jump on over to the next video.