Add CSS and Static Files in Django | Is Your CSS Not Loading?

As a part of the Django tutorial series, we will learn to add CSS and other static files in Django. We will also see how you can debug if your static files are not properly loading in the Django template.

Setting Static URL in Django

Open setting file (settings.py) in your Django project and set STATIC_URL and STATICFILES_DIRS variables.

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static/"),
)

BASE_DIR is the path to the Django project files. It might be already defined in the settings.py. Otherwise, you can set it.

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

Now include django.contrib.staticfiles in the INSTALLED_APPS list in settings.py.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles', # newly added 
    'registration',
    'myapp',
]

Make new directory named ‘static’ inside the project directory. And add all your static files including css, images and JavaScript.

Here we are adding css ‘style.css’ in the static directory. To make it more organized, we creating css as subdiectory inside static directory to add style.css.

Just like CSS, you can create the separate directory like ‘js’, ‘img’ to save JavaScript, Images in the static directory.

Here is the structure of the project directory after adding CSS.

├───myapp
│    ├───migrations
│    ├───templates
├───static
│    └───css
|         └───style.css
└───myproject
├───templates
     └───registration

Including CSS in Django Template

We need to load the static files by adding the below line of code at the top of the template (.HTML) file.

{% load static %}

Then, insert the stylesheet in the HTML using link HTML tag.

<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>

If you are new to the HTML and CSS, you can learn more about adding CSS in HTML code.

You have done with all the settings.

Start your project by running below command.

python manage.py runserver

And open your project URL in the web browser.

You can see the your HTML template decorated with your style sheet.

Note: I tested this code and implementation in the Django 2.2 version and it is expected to work on any Django version.

Resolving 404 Not Found Error for Static Files

If your project is unable to locate the CSS or any other status files inside your project directory, it will throw HTTP 404 status code as an error.

Is your Django CSS not loading?

There are multiple ways of debugging it.

Using findstatic option

Run manage.py with find static option.

If Django project able tp locate the CSS, it will return path to your CSS file.

$ python manage.py findstatic css/style.css
Found 'css/style.css' here:
<path_to_your_CSS_file>

If the CSS static file not found, it will throw an err as “No matching file found”

$python manage.py findstatic css/style.css
No matching file found for 'css/style.css'.

Using Browser Console Output

If you see your CSS or static files are not added properly, you can check the browser console output.

To see the console output in Google Chrome browser,

• right-click on browser window
• select “inspect” or press ”Ctrl+Shift+I”
• open “Console” tab in “inspect”

You can see the error message.

GET http://127.0.0.1:8000/static/css/style.css net::ERR_ABORTED 404 (Not Found)

It has clearly mentioned that static file is not found.

There can be multiple reason if the Django is unable to loacte static files.

• Check the static file directory and file names. I remember spending half an hour as I added .css explicitly in the file name and Django was reading this file as style.css.css.
• Recheck all the static URLs and paths set in the settings.py

Understanding STATIC_ROOT and STATICFILES_DIRS

Don’t get confused with the STATIC_ROOT and STATICFILES_DIRS in settings.py.

When I faced the issue with my static, I dig into the internet. After reading through multiple pages, I found it more confusing. So, I just want to make it simple and clear for you.

Both of these paths have different use.

STATICFILES_DIRS

You can keep the static files in multiple directories. For example, you might want to keep one static file directory for each Django app. In this case, you can list down all the static file paths inside in STATICFILES_DIRS list.

STATIC_ROOT

If your project is under development, you don’t need to set STATIC_ROOT in Django settings. This path is used when you deploy your project.

When you run below command, it will collect all the static files into the STATIC_ROOT path directory.

python manage.py collectstatic --noinput

Keeping all the static files in one directory is useful to secure your files in production.

This is all about how to add CSS in Django. Similarly, you can add other static files like JavaScript, Images, etc. Let me know if you are facing any problem adding static files in your Django project.