I am having trouble understanding why the main.css file is not loading properly in my Django project. I am using the skeleton boilerplate and trying to change the background color, but the changes are not reflecting on the webpage. It's strange because when I run python3 manage.py runserver, it displays the initial values from my original main.css file that were set at the beginning of the project. However, when I make changes to the main.css file, the webpage still shows the original values.
- First, I created a
staticfolder outside my app directory in the project. - Then, I added a CSS folder within the static folder.
- After that, I included the
skeleton.css,normalize.css, andmain.cssfiles.
In my index.html file, I linked the static folder along with the skeleton CSS files and main CSS files in the head tags.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{% static 'css/normalize.css' %}"/>
<link rel="stylesheet" href="{% static 'css/skeleton.css' %}"/>
<link rel="stylesheet" href="{% static 'css/main.css' %}"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2e252c3f3963273e0d7f6375637d">[email protected]</a>"></script>
<meta charset="UTF-8">
<title>index</title>
</head>
Everything seems fine until this point. The confusion arises when I try to modify the styles in the main.css file to change the background color and layout.
body {
background: #505f73;
}
.container {
background: #FF0000;
margin-bottom: 50px;
margin-top: 50px;
padding: 25px;
text-align: center;
}
https://i.sstatic.net/2Pmpf.png
The initial output was exactly what I wanted while coding the site. But now, when attempting to change the background-color property in the main.css file, no visible change occurs on the webpage. Even after modifying the hex code for the background color, the page still displays the original values. Deleting everything in the main.css file and reloading the webpage still results in showing the original output as seen above.
Any insights into what might be causing this issue?
Note: I have already added the following lines to my settings.py file:
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join('static'),)
Please refer to the attached directory structure image below: