Problem: As the title says I am building a django project the base.html extended to homepage.html and works fine, static images appear, but home.css does not works anywhere.

Update

I have switched in the base.html

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

to this <link href="css/home.css" rel="stylesheet" />

than I have also tried this: <link rel="stylesheet" type="text/css" href="{% static 'css/home.css' %}" />

It deletes a formatting on -s that was caused by another previously used .css that has been deleted since but the formatting sticked on. I have called this css property thickkk{color: red;} many places in both base.html and home.html and it still not working.

many places in both base.html and home.html and it still not working. I have also get the following error message if I inspect the site with/F12/consol/ 127.0.0.1/:1 Refused to apply style from 'http://127.0.0.1:8000/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Update ERROR message

Refused to apply style from 'http://127.0.0.1:8000/stacic/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Properties: Python 3.7, Bootstrap 4

settings.py

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'baseprojectfolder/static/')] STATIC_ROOT = os.path.join(BASE_DIR, 'static') STATIC_URL = '/static/'

base.html

I have created a base.html that hold the navbar and the footer.

This also has the CSS imported from a static css and also from bootstrap

It finds the static files because it imports the images that are appearing both here and in the home page

<!doctype html> <html lang="en"> {% load static %} <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="xz"> <meta name="author" content="xz"> <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/> <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> <title>Click Helps - BE PART OF THE NEW CREATION</title> <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/"> <!-- Bootstrap core CSS --> <link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="{% static 'css/home.css' %}"> </head> .... <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script> <!-- I have placed in the followring 3 line from bootstrap to make JS work --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>

home.html

I have used the center CSS property I have created

{% extends 'applicaonfolderofmine/templates/base.html' %} {% load static %} {% block content %} <main> <body> <div class="container"> <h1 id="about" class="center" >About</h1> ...

home.css

it can be found in "django-project/certainapplication/static/css/home.css"

.center { margin: auto; width: 60%; padding: 10px; }

Error messages in terminal

Not Found: /docs/4.3/dist/css/bootstrap.min.css [22/Feb/2020 15:55:26] "GET /docs/4.3/dist/css/bootstrap.min.css HTTP/1.1" 404 2494 Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js [22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509 Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js [22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509

I have read the following articles but they haven't answered my question: