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.