Made withFlaskClip

Flask Tutorial #9 - Static Files (Custom CSS, Images & Javascript)

T

Tech With Tim

Creator on the Flask channel

Watch on YouTube ↗

187K viewsNov 18, 201910:47 runtime

Learn the proper way to manage static files in your Flask web applications. This tutorial covers how to serve your own custom CSS, images, and JavaScript by correctly structuring your project with a `static` directory. Discover how to use the `url_for` function within Jinja2…

Chapters

#flask#clip#backend

Project Structure for Static Files

In Flask, static assets like CSS, JavaScript, and images are handled through a dedicated folder.

**/templates/**: This folder holds all of your Jinja2 HTML templates that will be rendered by Flask.
**/static/**: This folder is the designated location for all static files.

Important
The folder for static assets must be named static. Flask is specifically configured to look for this directory name by default.

Linking Static Files in Templates

To correctly link to your static files from an HTML template, you must use the url_for() helper function. This function generates the correct URL for the given endpoint.

CSS Stylesheets: Use a <link> tag in the <head> of your HTML document.

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

Images: Use an <img> tag with the src attribute.

<img src="{{ url_for('static', filename='images/my_image.png') }}">

JavaScript Files: Use a <script> tag, typically at the end of the <body>.
```
<script src="{{ url_for('static', filename='main.js') }}"></script>
```

Key Concepts & Best Practices

File Organization: You can create subdirectories within the static folder to keep your assets organized (e.g., css/, js/, images/). When you do, include the subdirectory in the filename path:
```
# For a file located at static/css/main.css
url_for('static', filename='css/main.css')
```
Attribute Correction: Remember to use the correct attribute for the HTML tag.
- Use href for <link> tags (stylesheets).
- Use src for <img> and <script> tags.

Tip
Overriding Framework Styles: To override styles from a CSS framework like Bootstrap, place the <link> for the framework's CSS before the <link> for your own custom stylesheet. The browser will apply your styles last, allowing them to override the defaults.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">

Introduction & Fresh Project Setup

Hello everybody and welcome back to our Flask tutorial. So as you guys might be able to tell, we are starting off fresh here. What I'm actually gonna be doing is talking about static assets or static files. Now in Flask, there's kind of a weird way of displaying images and loading in your own custom CSS classes and using your own custom JavaScript. So I'm gonna cover that quickly today, and then in the next video, we're gonna talk about blueprints, which is what a lot of you guys have been asking me about on how we can actually make our Flask app into multiple Python files and kind of split it up and make it a bit more organized than what we had before.

So anyways, let's go ahead and get started. Since I'm starting fresh, I'm gonna create a brand new project to refresh you guys on kind of how we do this, create the directories and all that. So I'm just gonna make a file, I'm gonna call this main.py. This will be where we actually have our Flask app. I'm just gonna go through and quickly do some things. So I guess say from flask import Flask with a lowercase f, and import render_template.

What I'm gonna do now is just create a brand new Flask app. We already know how to do this: app = Flask(__name__). And that will just create a very basic kind of home page function here. So @app.route('/home'). I'm also gonna show you that we can do more than one route to these functions, so I'm gonna do another one for /. Which now just means this function can be accessed by both of these different routes. I'm gonna say def home(): and then here we're just gonna return render_template(), and we'll call this one home.html for now, and then we'll do something with that.

Okay, so now let's run our app. So if __name__ == '__main__':, I believe we say, what is it? app.run(debug=True) like that. Okay, so that should be all that we need to do if I didn't make any mistakes for the main file.

Now what I'm gonna do is set up a template file, so we're gonna put all our HTML files. To do that, we're just gonna make a new folder, I'm gonna call this one templates. And then I'm gonna make another new folder this time, and we haven't seen this yet. I'm gonna call this one static.

Creating the Folder Structure & HTML Templates

Now you might already be able to tell where we're gonna put specific files. But essentially any static file we have, which means not like a changing file—so, for example, JavaScript, CSS, images, I believe there's some other kind of static files as well—are going to go in the static directory. And then all of our HTML files that we're gonna be rendering again will go inside this templates folder.

So inside this templates folder, I'll create a new file. I'm gonna start with a base.html. We'll also make a new one while we're here and we'll call it home.html. We'll start coding up the base.html file, and then I'll talk about creating a few files inside of our static directory and how we can import our own custom CSS and then an image as well.

So let's just create a very basic HTML. I'm gonna avoid putting the Bootstrap stuff in for now just because it's gonna take up some time we don't need to waste. We know how to do that already. So in the head, we'll set up a <title>. And then we'll set up a block, so we'll just say {% block title %} and then {% endblock %}.

Now we'll set up some <body> tags here. And then we'll add another block: {% block content %} and then {% endblock %} like so. Okay, so now that we have that, we have our base template. So let's extend this base template. This is gonna be inside our home.html file. Again, we already know how to extend, so {% extends "base.html" %}. And then we'll add our blocks here, so pretty straightforward: {% block content %} and {% endblock %}. And then we'll add our block title, which I guess I'll just copy this and put it at the beginning to save us some time.

Okay, so now that we've done that, let's just fill in these blocks quickly. That's what we want to display, and then we'll actually get into the static files. I know I've wasted a bit of time here, but we just need to set this up for the beginning.

So for our title, I'll just call this Home Page. And for our block, let's just do an <h1> and let's just do Home Page, because I'm just gonna apply some basic styles to this so that you guys see how this works.

Okay, so we have our home.html file, kind of messy but that's fine. We have our base.html file, and now what I want to do is show you how we can import our own custom CSS.

Linking a Custom CSS Stylesheet

To import our own custom CSS, we're gonna create a new CSS file inside of our static directory. So to do this, I'm just gonna call this style.css. It doesn't matter what you call it, but make sure that you remember the name.

And now I'm going to show you how we can actually load the CSS file from inside here. So to do that, what we're gonna do is say <link rel='stylesheet'>. I'm going through this kind of quickly as well because I realize a lot of you guys know HTML so you probably know how this works. And then I'm gonna say href= and then this is where it gets a little bit different, so make sure you're paying attention.

Now, inside of our Flask application, it sets a default that all of our static files will be saved in the folder called static. Which means you actually need to make this folder called static, like I'm showing right here. It needs to be called that. Because what we're gonna do is grab the URL for that static file and then reference the actual specific file name that we want inside of here.

So to do that, we're gonna say {{ url_for() }} and then here we're gonna put the name of static. So we're just gonna say 'static', like that. And we're going to say filename=, make sure you don't forget the quotes, and in here the name of your CSS file. So in this case, style.css. The way that this works is essentially we're gonna use the Python code here to grab the URL for the static folder, which will give us the URL to here. Then we can specify the exact file name, in this case is style.css, and then we'll load that in as a stylesheet.

Now, we might also want to do a type=. I don't actually know if this even makes a difference, because sometimes I do it without and it doesn't do any different. We'll just say text/css. And there we go, we should now actually have loaded in our stylesheet.

So I'm not gonna really talk about how CSS works, it's just a very basic styling. But to kind of make this easy for us and see that everything's working, I'm just gonna set a body color. So I'm just gonna say body { color: ... }. I don't know, let's just do some random #FFE. I don't know what color that's gonna be, but I guess we will see.

Okay, so now that we've done that, I think we're actually good to go ahead and run this and see if this is working properly, if we're actually loading this in. So give me a second, I'm just gonna CMD into this folder and then we'll be right there.

Overriding Bootstrap & Organizing Static Files

Okay so python main.py. I just ran this now. Sorry, that just took me a second. I'm gonna open up a web browser here, let's get this in, drag this over, and you can see we get 'Home Page' showing up in this kind of weird blue color, because that is, well, I guess whatever the color I decided to make. But anyways, that is how you load in static CSS.

Now, if you wanted to have your Bootstrap in here as well, which you likely would, I'm just gonna grab it—I have another file open here that actually has that in here. What you do is just put your Bootstrap CSS link above the other link. So what you need to do is put Bootstrap up here, then you put the link to your custom CSS file. And then that way, if you do it correctly in your CSS file, you can actually override these Bootstrap classes and make your own kind of custom HTML and stuff. So if you see this, like when I refresh, you see that this text gets changed because we had the Bootstrap load in here, but our color is actually staying the same because that color is going to override by adding that to the body tag.

So anyways, that can get a bit confusing when you have multiple kinds of stylesheets you're referencing and you need to override specific styles, but this is kind of how you do it. You're gonna put your CSS styles in here.

Now, I just want to show you that we can actually create folders within our static folder. So if I wanted to say that all the CSS for a specific part of my website is in one folder—maybe it's like the login page or the user signup or something—let's just say styles like that. I'm gonna create a styles folder. I can move this style.css file into that folder. So I'm just gonna do this through Sublime like that. And now what I would do if I want to reference that is, rather than saying filename='style.css', I'm just gonna say styles/style.css. The reason that works is again because we're gonna reference this static folder, and then once we're in that folder, we can just type the path to whatever file we want. It will grab that for us and render it. Okay, so we've done that now.

Adding Images and JavaScript Files

And lastly to talk about images and then JavaScript. If you know how to do this, you'll know how to do the JavaScript, so it's not that hard.

So I want to actually reference an image and display that on my web page. I mean, you guys were asking about this, how do I do that? Well, we need to grab an image first of all and throw it in our static folder. Let me do that. Okay, so I found an image. I just threw one into the static folder. This is what the image looks like, it's just off my Python programming tutorials. And essentially, I've just thrown it in there. Now, what I'm actually gonna do is create a new folder in here and just call it images and then I'll throw that image in there, just so we keep things nice and kind of clean here.

And now to reference that, we're gonna do the exact same thing we did for this stylesheet here, except we're gonna do it with an image. So really easy, I'm gonna just copy this link tag. It's probably easier just to type out the image, but I'm gonna paste this in here. I'm gonna change this tag to say <img> like that. We'll get rid of rel, we'll get rid of type, and then our href will just change so it references the images folder and image.png, which is just what I named my image. So let's do that.

So I realized that I actually need to change this to src, not href. As href is actually for the link, that's why this wasn't working when I was messing with it before. But let's run this now. And when we do, we see we get this Python showing up here. I'm still not really sure why this home page has kind of disappeared, maybe I did something with the color. But anyways, there it is, that is the image for us, it's showing up.

And that is pretty much how you work with static files. I mean, we have style in here, we know how to reference that by just doing url_for() our static folder, then we just type in whatever it is that we need. And then for the source, same thing: url_for('static', filename=...) and whatever that file is. And that is pretty much all there is to using static files.

Now if you're gonna use a JavaScript file, same thing here, right? You'll do your <script> tag like that, or you'll link it, and then just load in that specific JavaScript file. And then that will actually work.

So that is pretty much it on how you use static files, images, and JavaScript. And if you guys have any questions, let me know. And in the next video, we'll be getting into blueprints, which is kind of how we can organize our document a little bit better.