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

Question

I want to know why static CSS files in Django always don't work as expected? I tried to include CSS styles in HTML style tag, and load static files in HTML. Only adding styles directly in tag attributes worked.

Some CSS code worked well in the static folder, some don't. I can't even style an h1's color through CSS files, which is one of the simplest styling things.

Still can't find a perfect way that can solve this problem.

Please help me with this ><

This is the 'base.html' file, where I extend all stuff from

This is 'index.html', extended from 'base.html'

In the second image, you can see there are no link tags that attach my CSS static files because it's not worked for me, so I took it off. And added a style tag instead.

The thing is, how to include CSS files is the accurate way??

Seems like the range which I extended is from the body tag of 'base.html', so the stuff in the head tag(where link tags should be placed) is also extended. And I guess that's the problem why my CSS files aren't correctly loaded?

If it is, can someone help me with some solutions please>< ?

Answer 1

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.