Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
When you give a browser some HTML, it's going to want a CSS. We can't expect our users to be happy with just raw HTML, can we? Flask makes it easy for us to use CSS and JavaScript in our apps.
The static/ directory is served automatically at /static while you're running your Flask app.
You also don't have to use every block in every child template. If you don't specify a new version of the block, Flask will just use whatever is there in the parent template.
No website or app is complete without some
styling.
0:00
At the very least, you're gonna need a
logo.
0:03
But, let's not worry about images just
yet.
0:05
Flask makes static files just as easy as
templates.
0:08
Just add a directory and get busy.
0:11
Well, so first we have to add a directory,
like I mentioned.
0:13
Templates live in this Templates
directory.
0:17
This really cool directory.
0:19
And static files actually have their own
directory as well, called static.
0:22
Anything that we put inside here we can
reference as slash static,
0:28
which is pretty cool.
0:31
So, we're gonna add a new file in there,
which we will call styles.css.
0:33
I'm a big fan of making something look
kinda horrible and then refining it so
0:40
it looks nicer, so
0:43
I don't really want this style sheet to be
awesome right off the bat.
0:44
So I'm gonna put in some, some horrible
stuff here.
0:48
Let's do body.
0:50
Background is gonna be beige, and color
will be medium orchid.
0:52
I also love all the crazy color names that
CSS has.
1:00
So we've got beige and we've got medium
orchid, which is just horrid.
1:06
So now we need to add this to our HTML.
1:11
So we're gonna do that inside layout.html,
1:12
because we want this applied to every
page.
1:15
So we're gonna add this to here below the
title.
1:17
We're gonna do link rel equals stylesheet.
1:19
And then href is gonna start with /static,
1:23
which is just a nice little thing that
Flask gives us to where we can
1:26
always refer to our static directory as
slash static during development.
1:30
And then we call the file styles.css, so
that's what we're gonna reference here.
1:34
Okay.
1:39
Let's refresh and see if it works.
1:40
It does!
It's a wonderfully, amazing design site.
1:43
Okay actually that's, that's kind of
hideous.
1:48
Let's, let's make it black on the beige.
1:49
So our color, we can actually just take
out that color altogether.
1:52
And we just refresh.
1:57
Yeah, there we go.
1:58
Okay, that's a lot better.
1:59
I can, I can live with that one.
2:01
Let's add a little bit of JavaScript to
the site, shall we?
2:03
So File > New File.
2:06
We're gonna call this scripts.js, cuz I'm
very clever in naming.
2:09
And I just want to have this do like, an
alert box, nothing nothing crazy.
2:15
So we're gonna do alert, Howdy!
2:20
Cuz that's a cool thing to do.
2:25
And then we're gonna go add that into our
layout file.
2:28
So down here before the end of the body,
script source equals static scripts.js.
2:32
And, we refresh.
2:41
And hey, we've got a Howdy!
2:44
So, that's pretty cool.
2:47
But, you know what?
I
2:50
don't want this to happen on every single
page.
2:50
I want this to just happen on the home
page.
2:52
Because it can be really annoying if every
time I want to add, it just,
2:55
that's horrible.
2:59
So, let's go add a new thing.
3:00
So, what we're gonna do here is, let's do
this block scripts.
3:02
All right?
And then we're going to cut this part out.
3:11
So now we have this new block, scripts
block.
3:15
And on our index page, we're gonna add in
our scripts block.
3:18
All right.
3:27
And then if we refresh this, on the ad
page we shouldn't get anything.
3:31
But if we come over here to the home page,
it says Howdy!
3:37
Cool, so we got exactly what we wanted
there.
3:42
Well at least I got what I wanted.
3:46
Maybe you want it to be on every page, I
don't know.
3:48
But, this highlights a important thing of
how easy it
3:51
is to use blocks to control what pages
certain styles or scripts show up on.
3:54
So feel free to experiment with this.
3:59
Add some more cool stuff in if you want
to.
4:01
With those design and JavaScript skills, I
think I'm teaching the wrong subject.
4:03
Okay, maybe not.
4:07
In our next stage, we're going to use all
the things we've learned to build
4:09
a fully functional single page web app.
4:11
You need to sign up for Treehouse in order to download course files.
Sign up