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
Connect your Flask website to static files to take advantage of CSS and JavaScript files.
File Path Types
Absolute File Paths VS. Relative File Paths VS. Root Relative Paths
Color Palettes
Typical System Fonts
- Arial / Helvetica
- Times New Roman / Times
- Courier New / Courier
From safe web fonts
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's talk about the static
files in your flask app.
0:00
Inside of our static folder, there are now
new folders for CSS, and JavaScript.
0:04
If you haven't already,
download the static files and
0:11
the new template files from
the teacher's notes below.
0:14
The CSS adds style and
layout to our website,
0:18
while the JavaScript
controls interactions.
0:21
Let's see what our site looks
like right now without them.
0:26
If you haven't already,
run your program with Python app.py and
0:29
open up your website in the browser.
0:33
Should look something like this
with a super adorable Corgi.
0:37
Now, let's open up index.HTML.
0:47
And at the end of our head here,
right before the close,
0:50
we're going to add a link
to our CSS styles.
0:54
<link rel="stylesheet"
1:01
href="/static/css/styles.css"> This
1:05
is a root relative file path.
1:12
This initial slash tells the program to
start at the root of the directory and
1:17
work its way down to get
to our styles.css file.
1:24
I've added a resource in the teacher's
notes that explains the different types of
1:29
file paths a bit more,
if you're interested.
1:32
Let's go ahead and add our styles
to our other two pages as well.
1:36
Link stylesheet static css,
1:42
and styles.css and then add pet.
1:47
Link, /static/css/styles.css.
1:57
And we also need to use the JavaScript
files here on our addpet page.
2:03
So, scroll all the way to the bottom,
2:08
and right before this body tag,
let's add a script tag.
2:11
And the source is /static/js/app.js,
2:17
awesome.
2:26
Save and refresh our page.
2:28
And, wow, that looks much better.
2:33
One easy way to customize the site
is to create your own color palette.
2:36
At the top of styles.css is a colon and
root with two curly brackets.
2:41
Inside are the colors used for
our website.
2:49
If you would like to change the colors,
you can do that here.
2:52
I've listed out a few places to find
color palettes in the teacher's notes.
2:56
I'll change out the dark purple for
a dark green.
3:00
Save, and let's hard refresh
the site with a command shift R.
3:07
And, awesome,
all of our dark purple is now dark green.
3:13
You can also change
the font if you'd like.
3:18
Right below the root, is this font family.
3:21
Here, it's saying to use Roboto.
3:25
If the user doesn't have Roboto on
their computer, then use Arial.
3:28
If they don't have Arial,
then use any sans-serif font you can find.
3:33
Let's change Roboto to Times New Roman,
3:38
save and hard refresh our site.
3:44
And you can see the font has changed
to a serif font. Feel free to take it further.
3:49
Customize the site to fit your style and
use it to play around with and
3:56
practice your CSS.
4:00
This is your project, so make it your own.
4:02
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up