HTML Docs Not Updating from CSS-CodePudding

I am using a CSS file to update my HTML in a Django app, but despite the fact that my "style.css" sheet is linked to the HTML file, there are no updates occuring.

"style.css" is in the same folder as my HTML document ("index.html"), but nothing is changing.

I've pasted my code below:

<head>
    <link type="text/css" rel="stylesheet" href="style.css" media="screen"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

I know that the CSS and HTML files are linked, because when I hover over the "style.css"href, I can press CTRL click, and "styles.css" opens in a new window.

I've been through four or five tutorials several times each, I have copied everything which they did, but mine is still not working. I've closed and restarted the app, I've re-started the local server, and I'm extremely confused how I can follow a tutorial exactly and still not get this to work.

I tried moving "style.css" to its own folder ("styles"), and then changed href to href="styles/style.css" but it is still not working. Nothing I have done works, and no tutorial has been even remotely helpful.

Any help or insight is really appreciated, as even on here, finding people with the same issue, I cannot resolve this problem at all.

I'm using VSCode, and Windows 11.

CodePudding user response：

you need config template section in django settings

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

be carefull to create static and templates directory in project root or any place you want and set in "DIR" in TEMPLATES for templates and set static for static files for js and css file. in static directory you must put your js and css file also you can create directory inside static directory called "js" hold js files and create "css" directory inside static for css files. now render yout html file in view like below

from django.shortcuts import render
  
def index_view(request):
    return render(request, "index.html")

now in your template files you can load static files

<!DOCTYPE html>
<head>
  {% load static %}
  <script src="{% static 'app.js' %}"></script>   
  <title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
  {% block content %}{% endblock %}
</body>
</html>

CodePudding user response：

in your html file you should add:


{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" media="screen" href="{% static 'styles/style.css' %}"/>
    <title>Document</title>
</head>

you should add in your setting.py:

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

also you should declare your folder structure like this:
in your root project (where manage.py declared), static folder and in your static folder you should have styles and in your styles is your style.css file.

static/styles/style.css