APRIL SPRING SALE | 20% off ALL ACCESS to One Month ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰

Hide

Write Better CSS with External Style Sheets

Day 6 ยท Lesson 1 ยท


We want to separate each coding language into its own file. That will help keep us organized.

- Whew all right.
Seventh inning stretch.
We're almost there.
Let's get out our muscles goosy and let's jump,
let's get serious okay?
Let's just into this.
So what we wanna do is come back to our project.
Hopefully you finished out these links here,
and there all working for ya.
Here's my answer.
You can pause and take a peak
if you had a little troubles with that.
But yeah, everything should be working good.
You may have noticed that there's these little
underlines under here.
How do you think we can solve that?
Maybe you're thinking CSS,
and if you are that's correct.
CSS is gonna be the style of how things look.
Remember html, our first part of the process,
puts it all on the page,
and now we're gonna polish it and make it look nice.
So that's what we're doing here now.
We're all CSS moving forward.
So to do our CSS in the first project with party tips,
just watch along.
Just watch along.
In the first project, we did this thing,
where we put this style sheet,
remember these style tags?
And then we said something like body, background,
just watch along.
Equals red.
And then bah, it turned red, right?
That's what we had going on in the first video.
And that's okay.
I mean this is like an okay way to do things.
But, I'm gonna show you a better,
more advanced way of including CSS in your project.
Because this is like, at this point
a little bit of an older way of doing it,
of putting it in the page.
More modern web development with more modern
web development, you wanna put each of the coding
languages in their own file, so that you keep them separate.
It's just a whole way of organization.
So that people can work on multiple things
at once, and we keep things organized.
So just watch along.
I can have this same effect, right?
Before I move this, by linking,
and that's what I did here for you.
By linking a separate style sheet
into the project.
And that's what we're gonna do.
I did it for you in this project,
but you can see it references style,
that CSS, in here.
And now if I put this style, that CSS here,
just like that.
And save and refresh.
It has the same effect.
And we know it's working if I change the color.
For example, boom, right?
It should turn green like that.
So we know that's working just like that.
It looks good.
(snaps)
Now the other thing you have in your project,
are these comments.
I gave you some code in your style, that's CSS.
So maybe you're like, yeah, yeah,
that's what mine looks like.
And good.
This is what you have.
So basically what you have in here
is just some comments.
These are comments that it won't effect the site at all.
But they're just little notes that you can put you know,
ownership of, or if the next developer
down the line works on a project,
you just have some notes of where the thing came from.
And I also gave you some body styles
in here that we'll at at the end of this.
To make sense of that.
But I just wanted to illustrate for you,
I'm gonna save it like this so you can go ahead
and do that.
I just wanted to illustrate for you
that we are doing essentially the same thing,
but now we're linking our CSS into the project.
And that's really exciting,
'cause we can work now in just these two folder like this.
Okay, so I'm gonna save and refresh.
Here we go, here we are.
And we're gonna go step by step
through styling this project.
Now for this we're gonna need that design.
That original design that I showed you.
This one here.
'Cause we're gonna need to talk
through it and say what do we wanna do.
Well now the first thing I see
in my design is the white big letters of cookie, right?
And then we have white text here and...
Okay, I'm thinking aloud.
I think maybe the first thing we should do
is define this black box.
I think we should do that first.
Think that would make sense.
That black box is known as a container.
All websites have them.
The container, if you look at like Zappos
or something again.
The container is really just the center
of where the content is.
See if I zoom out a lot you can see things
are actually centered in a box.
Almost all websites have this kind of style.
A few that don't, call it fluid.
That's it's 100%, and it doesn't have it.
But most do.
If you start looking around you'll notice.
Zoom out a little bit.
Things are in boxes.
Things are in containers.
And so, we're gonna make a container.
We're gonna put things in this neat little box
here like that.
And let's go ahead and do that.
So to do that, we want to,
remember we can target things here.
I can say h1 be black, h2 be white, right?
We can do the same thing with an id.
And this id is basically a special name
that I made up.
I put the word container here.
And let's just do it first and then we'll talk about it.
So, what we need to do is we need to do this,
container in your CSS.
Go ahead and follow along.
And we're gonna say container + background equals black.
Like that.
Give that a second.
Give that a try.
And now we refresh, boom.
You'll see everything in this box has become black.
Okay, well what is that box?
Well that box that I made for you,
is everything basically on the page right?
Everything inside the body is now in this div,
this division right?
Everything's in there.
And that's all black.
That's exactly what we said we'd do.
Well why make that?
Because we can give it some cool characteristics.
So for example I can move that box around the page, right?
Like have a sidebar, or header.
I can do anything with that box that I want.
In this case, what you're gonna do now,
is you're gonna give that box a width,
check this out.
We'll do a width of, no just pick a number
that sounds, 400 pixels.
Boom.
And now we're moving that box and shaping it up, yeah.
And I can say okay, backgrounds black,
width is looking pretty good right there.
What if I wanted all the text in that now,
'cause I can't read that text,
to be white?
How would you do that?
Hopefully you're remembering,
you do color=white, like that.
And now we're making some quick strides, right?
Looks pretty good.
Okay.
So I thinks that's our first step,
is getting that going along.
The next thing I wanna do is get this text
to be a lot larger.
Here you notice it's quite large, right?
So to do that we're gonna target which html element?
but the h1, h1.
And for that, just follow along.
We're gonna do this and we're gonna make a font size,
is what it's called.
The property is called font-size.
And you know we can just pick a number
that feels good.
We'll say 50.
So 16 is the default.
So 50's like bigger.
So we'll say 50.
Looks pretty good.
Maybe I'll even make it a little bit bigger.
We're just gonna have some fun with it.
Let's say like 80.
Cool, you know.
Whatever feels right.
Let's try to get things pretty good in this lesson.
Looks pretty good.
I like it.
All right.
We're just gonna go step by step through our design.
Where are we going, where are we now?
Well, we wanna go to a place where the background
on this h2 is blue, and the text is black.
Let's code that.
You should know how to do that by now.
So, we know that's an h2 right,
because we have it here.
We said it's an h2, a heading two.
And so we say h2.
What did we say again?
We said the background on that's gonna be blue.
Background blue.
Okay.
And the font or color right, is gonna be white.
I don't know silly it's already white.
We want it black.
Black and white
Black and white
Black and white
Black and white.
There we go.
All right.
Now what did we notice here?
What are we noticing?
You may notice that the color blue here
is different than the color blue.
How do you say this color blue specifically?
That's what I wanna show you in the next video.
I'm gonna talk about choosing digital colors.
And how you can arrive at the exact color that you want.
So get this far with your project.
Copy along on my code and in the next video
I'll talk about that.