Create Static Folder

When building web applications, you probably want to add some static files like images or css files.

Start by creating a folder named static in your project, the same place where you created the templates folder:

The name of the folder has to be static.

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/

Add a CSS file in the static folder, the name is your choice, we will call it myfirst.css in this example:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/
            myfirst.css

Open the CSS file and insert the following:

my_tennis_club/members/static/myfirst.css:

Modify the Template

Now you have a CSS file, with some CSS styling. The next step will be to include this file in a HTML template:

Open the HTML file and add the following:

{% load static %}

And:

<link rel="stylesheet" href="{% static 'myfirst.css' %}">

Example

my_tennis_club/members/templates/template.html:

Restart the server for the changes to take effect:

And check out the result in your own browser: 127.0.0.1:8000/testing/.

Didn't Work?

Just testing? If you just want to play around, and not going to deploy your work, you can set DEBUG = True in the settings.py file, and the example above will work.

Plan to deploy? If you plan to deploy your work, you should set DEBUG = False in the settings.py file. The example above will fail, because Django has no built-in solution for serving static files, but there are other ways to serve static files, you will learn how in the next chapter.

Example (in development):

my_tennis_club/my_tennis_club/settings.py:

This will make the example work, but we want you to choose DEBUG = False, because that is the best way to learn how to work with Django.

Choose Debug = False

For the rest of this tutorial, we will run with DEBUG = False, even in development, because that is the best way to learn how to work with Django.

Example:

my_tennis_club/my_tennis_club/settings.py:

---

Login