Hi, everybody, welcome back.
One of the things I really wanna stress in this Introduction to CSS course Is that
there's this need to stop and practice and review what we've learned so far.
So I'm gonna make sure that I include little things that I'm gonna call
Code Together.
So, if you're watching this right now, and you don't have your laptop next to you or
whatever you're using to code, I really hope you'll stop, go get that, and
code along together with me because just listening with me doesn't really give you
the true experience you need to type it in and make mistakes as we go along together.
Okay, so let's go ahead and begin.
What I'm going to do in this video is I'm gonna go back to an oldie but
a goodie that we did in HTML five.
And I want us to go in together and style it.
Alright, let's start by making our CSS file.
I'm gonna go ahead and create a new one now,
go up here to file, new file, or you can do command N.
And the first thing you want to do is you want to save this as a .CSS file, so
then that way your editor knows to color things the way you want it to color.
Now, whenever I'm designing pages,
I keep all of my HTML files in one folder and my CSS files in another folder.
And I really encourage you to do the same thing.
So, I'm gonna go ahead and go into my CSS folder.
And I'm gonna call this, let's call it together-1.css.
It's really important that you remember to put that file extension, or
things aren't going to work.
All right, so here's my old, boring page.
What people typically do is they style from the top of the page and
work their way down.
So, I want you to pick your own values, but let's together go ahead and
style my header.
Oops, wrong thing here.
And we can give it a background.
I'm gonna try B3B3B3.
We can give it a larger font if you want.
I'm gonna say font size.
Let's make it 150%.
Just a little bit something different.
I'm gonna save this, and I always really encourage students to make small changes
to their code and then check and see what happened.
So let's see if we changed anything over here.
And so now I'm going to reload it and see what happened, and
if you notice, nothing happened.
Well, the problem is I didn't link the style sheet correctly to the HTML file.
Remember how I told you I always think put things in a folder called CSS?
I need to include that.
All right, come back.
Reload.
Oh, hey! I’ve got a little bit of something
going on there.
All right?
So, now let’s go ahead and just add a few more things.
I know it doesn’t look exactly like my example.
But one of the things I wanna do next is, I wanna go ahead and style, let's see,
my header.
Let's give the entire header a background color.
All right.
You can pick anything you like.
And I'm going to pick background: I think I have 66666, all right.
And let's go ahead and I really want to align that text.
So I'm gonna call it text-align: center.
Save, refresh.
Oh we're getting there!
The page is starting to look slightly different all the time.
Now the one thing that's confusing me is it doesn't appear to like my background.
So if I go back, I'm gonna realize, oh, I forgot that # sign right in front.
And make one, two, three, four, five, six.
Save it here.
Refresh.
There we go.
Now these colors are really ugly and really hard for you to see.
And I realize that.
So let's go ahead and play with things to make this a little bit easier to see.
Let's go ahead and put in.
Let's change the h1 so it's a different color and
let's go ahead and change the navigation.
So that we have, I'm going to change the font, let's try the font variant.
I like the font variant.
It lets you put things into uppercase, lowercase, different things like that.
We also have font size.
I'm still not happy with the size, so I'm going to make it 150%,
and the last one I'm going to do is font family.
Now if you recall, with font-family it's very customary to give it more than
one value because not every browser supports every font-family.
So in my case, I'm gonna go ahead and try putting in Arial,
Times New Roman.
If you have a font that's made up of multiple words,
you need to put them inside the quotes.
And then finally just Serif.
Now this is how I code.
I code making mistakes.
I code with typos.
To be honest, I rarely code in a button down shirt looking so uncomfortable.
The way to code is comfortably with a coke and a Hershey bar so
that when you're done you have these celebratory little bites of chocolate.
But for now, I'm just gonna do the best I can to lead you along.
I changed a lot of things.
Let's see what happened.
You can see I'm gonna make a little bit bigger, we're starting to get there.
We've got the background colors, we have the things like that.
So let's go ahead and just style a few more things together,
and then we'll go on and learn a little bit more.
I would like to see you pick your own things for h2.
So h2 I'm gonna pick a different color,
let's try same color 666666 and a different background.
I'm going to use 00B7EA.
So, does it matter?
Does it matter whether I type it as EA uppercase, lowercase?
It doesn't matter at all.
The important thing is for you to usually be consistent so
you don't mess yourself up as you're going back and forth.
All right?
We'll refresh again.
All right.
It's starting to look much different.
This isn't a lot of style.
It's only one, two, three, four, five.
Five rules and we already have a much different look.
I'm gonna go ahead and make the screen smaller because when I put
in that font size 150%, it makes a big difference.
All right.
One kind of last cool thing I'd like you to try to do is go ahead and
try to style the summary in the details.
Because if I want to make just the, I grew up in Ashtabula Ohio part,
how can you make that italics but not the rest?
All right so if you remember what the HTML code looks like,
let me show you a quick example, is that right down here I have my details tag and
if you haven't seen it before, I put the word open in
which means by default show it is open, so no one has to click on it.
I've got my details.
I've got my summary where the My Childhood part came up, and
then I have all this part.
So if you want to make that italics, and only that, how do you do it?
All right.
What we're gonna start with, is we are going to style the details tag.
And I'm gonna scroll up here a little bit so you guys can see a little better,
hopefully.
And what I'm gonna say is I want to make everything italic, and
the way you do that is you go and put in font-style: italic.
Got it?
Now this isn't gonna be exactly what we wanted because what I've done is I've
italicized everything.
So now you wanna go back and say, but you know what?
I don't want the summary.
I don't want the summary in italics.
Oops, go back here.
Summary and I can say font.
Oops, font-style.
Well how you make it so it's not italics,
by default most things aren't, you can actually put in the word normal.
All right.
So that's it.
Now we've got this part in italics and this part in bold.
For the most part we're finished but I am going to add one little thing,
because its really common for people to style their header and
their footer in a very similar manner.
So let's go and add style my footer.
And what I want to do is I wanna give it the same background color
that my header had.
So background, one, two, three, four, five, six, boom.
And there you go.
So what we've done now is we've gone from a very simple, basic HTML file and
we've started adding just a little bit of color, a little bit of font size,
a little different things like that.
Let me show you what the original file looked like again and
we'll look at them next to each other.
I'll comment out my style sheet.
I'll open it up and you can see these are two very different looking pages.
But they're exact same HTML.
Okay great, these are the type of things you're gonna need to do for
the homework in this section.
So practice here, come back and watch me,
if it helps you out a little bit getting over humps.
But the important thing is, code, code, code, good luck.