How do I make Django “see” CSS?

Posted on

Question :

I’m writing a Django and Python application, and I’m having a problem
    in the templates part, running locally Django found the template and
    I was able to visualize it through localhost:8080/home , it happens that the
    style sheet (CSS) is not being downloaded (localized) by Django,
    it is displaying the template in HTML only.

The project tree is as follows:

  |_ templates
      |_ templates
          |_ index.html
          |_ base.html
          |_ css
          |_ js
          |_ fonts


# -*- coding: utf-8 -*-

Django settings for Chameleon project.

For more information on this file, see

For the full list of settings and their values, see

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os

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

#PROJECT_PATH = os.path.dirname(os.path.abspath(__file__))

# Quick-start development settings - unsuitable for production
# See

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'gb)bi45$q*#()1gbf_1td3x7+7#%3zk4%&)$^f6@8bpndb$a12'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True



# Application definition

    'django.contrib.admin', #Sistema de administracao Backend
    'django.contrib.auth', #Sistema de autenticao
    'django.contrib.contenttypes', #Tipos de conteudo 
    'django.contrib.sessions', #Trata as sessoes
    'django.contrib.messages', #Gerencia mensagens de erro sucesso etc
    'django.contrib.staticfiles', #Gerencia arquivos estaticos (html, CSS, JavaScript)
    'Library', #Adicionando nome do projeto para criação das tabelas no DB


ROOT_URLCONF = 'Chameleon.urls'

WSGI_APPLICATION = 'Chameleon.wsgi.application'

# Database

    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
        'USER': '', 
        'HOST': '',
        'PORT': '',

# Internationalization



USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)

STATIC_URL = '/static/'

MEDIA_ROOT = os.path.join


# -*- coding: utf-8 -*-    
#from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import render_to_response

# Create your views here.   
def home(request):
    return render_to_response('templates/index.html')

My HTML index.html:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap Icone da pagina -->
    <link rel="shortcut icon" href="">


    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap-responsive.css" rel="stylesheet" >
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/signin.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src=""></script><scriptsrc=""></script>


    <div class="container">

      <form class="form-signin" role="form">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="email" class="form-control" placeholder="Email" required autofocus>
        <input type="password" class="form-control" placeholder="Senha" required>
        <label class="checkbox">
          <input type="checkbox" value="remember-me"> Lembre-me
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>

    </div> <!-- /container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

I visualized by the browser’s developer mode that the 3 CSS files
    not found, is returning 404 not found.

My python is Python27 Django is 1.6.2


Answer :

I understand that three things are missing to solve your problem:

1) Define the path to static resources

There is a variable that you add in , called STATICFILES_DIRS , where you can add paths to your static resources (css, js, images, etc files). For example:

# Additional locations of static files

On the test server this is enough, but in production it is also necessary to run python collecstatic to copy the files to the right folder.

2) Define the URL of static resources

In the file, you need to make a modification so that the URLs are recognized. So:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # ... seus URLs aqui
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

3) Add prefix to static files in the template

The prefix for static files in the CSS URL is also missing.

You can solve it like this:


<link href="css/bootstrap-responsive.css" rel="stylesheet">


{% load staticfiles %}
<link href="{% static "css/bootstrap-responsive.css" %}" rel="stylesheet">

Or use the older method:

<link href="{{STATIC_URL}}css/bootstrap-responsive.css" rel="stylesheet">

On this page of the Django documentation , further details are configuration of static files.


Since your project is structured like this:


    # '/var/www/static/',

from django.conf.urls.static import static
from django.conf import settings

urlpatterns = patterns('',
    #suas urls
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)


Always add at the beginning of your HTML {% load staticfiles %}

{% load staticfiles %}
<link href="{% static "css/bootstrap-responsive.css" %}" rel="stylesheet">
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">


Leave a Reply

Your email address will not be published. Required fields are marked *