How to Use CSS in Django

A simple example of Django and CSS

If you follow django's guidelines, you can simplify your life greatly.

In your sample code, inside your application directory, create a folder called static. Inside this folder, place your css files.

Example:

$ django-admin.py startproject myproject
$ cd myproject
myproject$ python manage.py startapp myapp
myproject$ mkdir myapp/static
myproject$ cd myapp/static
myproject/myapp/static$ nano style.css

In your templates:

<link rel="stylesheet" href="{{ STATIC_URL }}style.css" />

Make sure you add myapp to the INSTALLED_APPS list in settings.py. Now when you use the built-in development server, your style sheet will be rendered correctly.

Django searches for a static directory inside installed applications by default, and with current versions of django, static files are enabled by default.

The Django example has the path my_app/static/my_app/myimage.jpg which
is a little confusing if your app and project have the same name.

This is recommended because when you run collectstatic to gather all your static files, files with the same name will be overwritten. If you have a file called myimage.jpg in another application, it will be overwritten. Giving the application name inside the static directory will prevent this, because the exact directory structure will be replicated inside your STATIC_ROOT directory.

A simple example to illustrate the point. If you have a django project with two apps, like this:

.
├── assets
├── manage.py
├── myapp
│   ├── __init__.py
│   ├── models.py
│   ├── static
│   │   └── myapp
│   │       └── test.txt
│   ├── tests.py
│   └── views.py
├── myproj
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── urls.py
│   └── wsgi.py
└── otherapp
    ├── __init__.py
    ├── models.py
    ├── static
    │   └── otherapp
    │       └── test.txt
    ├── tests.py
    └── views.py

assets is your STATIC_ROOT. Now when you run collectstatic:

.
├── assets
│   ├── myapp
│   │   └── test.txt
│   └── otherapp
│       └── test.txt
├── manage.py
├── myapp
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── models.py
│   ├── static
│   │   └── myapp
│   │       └── test.txt
│   ├── tests.py
│   └── views.py
├── myproj
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── urls.py
│   └── wsgi.py
└── otherapp
    ├── __init__.py
    ├── __init__.pyc
    ├── models.py
    ├── static
    │   └── otherapp
    │       └── test.txt
    ├── tests.py
    └── views.py

You see it is creating the directories as well. In your templates you would now refer to each file with its "namespace" of the app: {{ STATIC_URL }}/myapp/test.txt

Django: how to use CSS that's in another file?

add a <head>…</head>tag and type <link rel="stylesheet" href="static/web/style.css"/> inside the <head>…</head> tag.
Make sure the <head>…</head> is outside the <body>…</body> tag. Here is the new code.

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="static/web/style.css"/>
  <!--other head contents like title and meta tag goes here-->
 </head>
 <!--HTML-->
 <body>
    <div class="topnav">
        <a class="active" href="/">Home</a>
        <a href="/donate">Donate</a>
    </div>
 </body>
</html>

CSS doesn't work as expected in HTML files in Django

In firefox and I think in chrome pressing F12 can show console, then we can see if all .css files are loaded properly and what is the problem, if they aren't. Can also pick element and see what css styles are applied to it and where they come from. Django has specific way of managing static files that may be misconfigured, if tags in the template work, then the problem is most likely in the static files.

Django will likely produce error message in the console if it can't provide a static file.

In any case, we may need some code from the template to see what is happening. If configured properly it can load static files, without problems, but there are steps to it. (explained here https://docs.djangoproject.com/en/4.0/howto/static-files/)

Can you use .js static files?Or any static files at all?

2 Important parts that may be missing. One is to use:
python manage.py collectstatic
Command after every change of static files.
https://docs.djangoproject.com/en/4.0/ref/contrib/staticfiles/#django-admin-collectstatic

The other is to start templates using staticfiles with:
{% load static %}

Then to remember the syntax for the files themselves like:

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

So django knows to load a static file instead.

Reply / Edit 2:

The tags seems ok(load static part). I think you don't need to repeat them in the same template, even if it extends other stuff, can just set it once every template that uses static files.

So there are 3 things you need. One is to have the tags in templates, as you do, the other is to have the static files in your static directory(specified in STATIC_URL in your settings file), and lastly to use collectstatic command after each change.

So lets say we look at

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

It looks good. That suggests you have 2 things for it to work. One is in your static files directory(defined in your settings file), you have:

static(or whatever name)/css subdirectory and then you have index.css file in there.
Also after you added the css file in there, to have done python manage.py collectstatic at least once.

The rest seems to be from CDNS(basically other hosting sites) Django should load them by itself, if the hosting there allows it.

Basically that is the idea,yea. All in here seems good. If there are still problems, check the static directory in settings py and make sure you used collectstatic after changes.

Errors will show in the terminal, so you can see if something isn't loading, why. : )

For errors in static files that are the 2 places to check. One is the terminal where python is providing info(or log files on the server if you can't see terminal), the other is the browser itself - it will show why it isn't loading a static file.

How do i load css file into html in Django

The href in your index.html right now refers to yourwebsite/stylesheet.css. Django doesn't know where that URL is as you defined your static URL as "/static/". Static located in the STATIC_DIRS will be loaded under the URL yourwebsite/static/stylesheet.css. This is why you are getting the 404 on the CSS file.

Change your index.html to use Django built-in template tags to make it easier.

{% load static %}
Some code here.....
<link rel="stylesheet" type='text/css' href="{% static 'css/stylesheet.css' %}">

This will automatically generate the right url for your static file which should solve the problem.

You don't need to run collect static in development as django's server will take care of the static files. During production will will need to run collect static and point your reverse proxy or the like towards the static files.

Why do we use css files for each APP in Django?

In nearly all frameworks, apps are designed to be stand alone elements that are inserted into a web page. They are often meant to be replaceable within the page with a different app as well as transferable, in that the can be used for other web pages. Having a CSS file for each app ensures that the app itself is stable across multiple use cases. Many frameworks also employ a css stylesheets for the index.html file, or the base webpage that contains the component apps.