Include CSS and JavaScript in My Django Template

Django 'Include' template with css/js

You can utilise the django-sekizai package here:

https://django-sekizai.readthedocs.io/en/latest/

You'd have a base template along the lines of this:

{% load sekizai_tags %}
<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <!-- other css and head content goes here -->
        {% render_block "css" %}
    </head>
    <body>
        ...

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        {% render_block "js" %}        
    </body>
</html>

Then in your menubar.html you can add the following anywhere in the template and they css will get added to the page head and the javascript to the bottom of the body:

{% addtoblock "css" %}
    <link rel="stylesheet" href="{% static '<appname>/css/menubar.css' %}"/>
{% endaddtoblock %}

{% addtoblock "js" %}
    <script src="{% static '<app_name>/js/menubar.js' %}"></script>
{% endaddtoblock %}

It's a really handy package!

django html template can't find static css and js files

Some of settings are misused:

STATIC_URL = '/static/' - this is fine

STATIC_ROOT = '/vira_app/template' - nope, this is supposed to be some folder not really related to the project structure. In the end, on prod it can be a CDN URL or a folder on different server. So try changing it to something like STATIC_ROOT = os.path.join(BASE_DIR, 'static') for the start.

As mentioned in comments you might need to define STATICFILES_DIRS - a list of folders where from static files must be collected to STATIC_ROOT by collectstatic command. This means you can have many subfolders containing static files in different places. However you'll need to collect those files all together to deploy somewhere. STATICFILES_DIRS + collectstatic will collect all of those files for you into given STATIC_ROOT (and contents of this folder should be deployed somewhere, to CDN for example).

Note, default set of STATICFILES_FINDERS already contains AppDirectoriesFinder which will automatically find all the static subfolders in any of the project apps. This means if you move static subfolder from templates to the vira_app root - you won't have to mention it in the STATICFILES_DIRS.

So:

STATIC_ROOT should not point to any templates subfolders, change it to something more "global"
STATICFILES_DIRS should link to the folder(s) where you keep your static files now or this folder should be moved to the root of vira_app to let collectstatic find it
collectstatic must be run before checking your styles and scripts in rendered page
after running collectstatic all the static files must persist in STATIC_ROOT so django will be able to map relative urls after STATIC_URL to relative paths after STATIC_ROOT and those files will be loaded

Note, some of your static files are linked in wrong way in the shown template:

 <script src="assets/vendor/aos/aos.js"></script>

this should be changed to {% static... as well.

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.

Include css and/or script from template tag

Use template inheritance, per the django docs. Please note that these are all very generic examples, it should be enough to get you going though. Be sure to check out the docs I linked above.

base_page.html

# pretend your standard html opening stuff is here.

# Put your base css file(s) here. Things you want for every page.
{% block css_block %}
# Leave this empty for now.
{% endblock %}

{% block body %}
# If all your pages have the same base layout, put it here.
{% endblock %}

# Put all javascript files here that are needed on all pages.
{% block js_block %}
# Leave this empty for now.
{% endblock %}

#pretend your ending html is here

gallery_template.html

{% extends 'base_page.html' %}

{% block css_block %}
<link rel="stylesheet" href="gallery.css"/>
{% endblock %}

{% block js_block %}
<script src="gallery.js"></script>
{% endblock %}

slideshow_template.html

{% extends 'base_page.html' %}

{% block css_block %}
<link rel="stylesheet" href="slideshow.css"/>
{% endblock %}

{% block js_block %}
<script src="slideshow.js"></script>
{% endblock %}

your view functions

#camelcase is fine, consistency is important though. 
def make_gallery(album,images,tag_atts) 
    #do things here
    return render_to_response('path/to/gallery_template.html')

def make_slideshow(album,images,tag_atts)
    #do things here
    return render_to_response('path/to/slideshow_template.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.