HTML Docs Not Updating from CSS

Question

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, tried to restarted the local server, moving "style.css" to its own folder "styles", and then changed href to href="styles/style.css" but it is still not working.

I'm using VSCode, and Windows 11.

https://stackoverflow.com/questions/2263096/css-file-not-refreshing-in-browser — vee, Sep 12 '22 at 03:15
Does this answer your question? [CSS file not refreshing in browser](https://stackoverflow.com/questions/2263096/css-file-not-refreshing-in-browser) — Rohit Gupta, Sep 12 '22 at 03:18
Those are very strange tutorials due to ignoring Django template syntax and how static files should be [configured and used in templates](https://docs.djangoproject.com/en/4.1/howto/static-files/#configuring-static-files). — Ivan Starostin, Sep 12 '22 at 19:30

score 0 · Answer 1 · answered Sep 12 '22 at 04:58

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>

score 0 · Answer 2 · answered Sep 12 '22 at 07:14

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

score 0 · Answer 3 · answered Jan 24 '23 at 04:09

0

Apparently it was just a cache issue. Clearing it took care of this, so I'm now clearing the cache every time I modify anything in the CSS Templates, which comes to clearing the cache basically everyday.

answered Jan 24 '23 at 04:09

Kyle Christian

57
10

HTML Docs Not Updating from CSS

3 Answers3