Party Tips: CSS is the Style

Week 1: Code Week · Lesson 5 · 4 minutes


Let's add some colors to our project

CSS 

  1. Adds styles to our page 
  2. Examples of styles include: background color, fonts, borders, margins, and many more
  3. CSS stands for: Cascading Style Sheets
- 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.