• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2021
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools

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

Aniruddha Chaudhari/10494/0
Django
YouTube CSEstack

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.

Table of Contents

  • Setting Static URL in Django
  • Including CSS in Django Template
  • Resolving 404 Not Found Error for Static Files
    • Using findstatic option
    • Using Browser Console Output
  • Understanding STATIC_ROOT and STATICFILES_DIRS

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”
Django static CSS not found error in console

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.

Python Interview Questions eBook

Django
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Leave a Reply Cancel reply

Prerequisite for Django

Learn Python Basics

Django Tutorials

Django- Create Your First Project

Django- Adding CSS/Static Files

Django- Create Form

Django- Display Message on Form Submit

Django- Create TextField in Form

Django- Add Model to Admin Site

Django- Registration/Signup Form

Django- Interactive Shell

Django- Social Login

Django- Deploy and Host [FREE] 🔥

© 2021 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard