I'm experiencing an issue with CSS in Django, where the CSS changes aren't displaying properly in the browser

As a beginner in Django, I'm facing an issue where my CSS styles are not appearing in the browser even though there are no errors in my code. Below are excerpts from my project files:

This is the base.html file:

<!DOCTYPE html>
{% load static %}
<html lang ="en">
<head>
<title>Investment | Home</title>
<link rel="stylesheet"  
href="https://stackpath.bootstrapcdn.com/bootstrap
/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/
iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 
'css/styles.css' %}">
</head>
<body>.....

This is the home.html file:

{% extends 'base.html' %}
{% block content %}
<div class="container">
<div class="row">
<div class="col">
<div id="home-content">
<h1>Investment @2019</h1>
<h3>Your Voice Matters!</h3>
</div>
</div>
</div>
</div>
{% endblock %}

This is the styles.css file:

h1 {
color :red;
}

body{

background-image: url('../img/p.jpg');
}

#home-content {
text-align:left;
padding-top:20%;
}

In the settings file, I have defined the following for static files:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL =' /static/'
STATIC_ROOT = "/home/p-amc-dgps-er/Bureau/investment/static/"
STATICFILES_DIRS =[os.path.join(BASE_DIR, "static"),]

It's important to note that the static folder and templates are in the same directory as manage.py.

Despite having no errors in the code, the CSS styles are not being applied in the browser. Any insights on what might be causing this issue would be greatly appreciated!

Answer №1

Web browsers frequently store files such as CSS to boost loading times. To ensure you are always accessing the most up-to-date version of a file (especially crucial for development purposes), you can disable this caching feature in your browser settings. In Chrome, simply open the developer tools by pressing CTRL+SHIFT+I or F12, navigate to the Network tab, and click on the Disable cache button.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure the server is reachable

I have been developing a web tool using PHP, HTML, and MySQL. I am looking for a way to periodically check the server's reachability. Currently, I am using a simple query sent through a JQuery-Ajax function to display an OK message if successful or an ...

Adding HTML content to a statically served file using Flask

Seeking assistance from those more experienced in Flask. I am trying to serve a static file and add some HTML content to it, or display the file beneath some text. Is there a method to achieve this, or am I approaching it incorrectly? @app.route('/com ...

"Utilize HTML to make inline-block elements appear small in size while giving the illusion of being

I have a group of inline-block elements (4 total), all arranged neatly in a single row. As the window size changes, the elements wrap to the next line accordingly. The page does not display scrollbars at the bottom until the browser width reaches the minim ...

Transforming ASCII Source Files into JPEG Images

I specialize in publishing technical books, available in print, PDF, and Kindle/MOBI formats, with EPUB coming soon. One challenge I have encountered is that the Kindle does not support monospace fonts, which are important for source code listings. The wo ...

Can you provide some examples of CSS code snippets?

Can someone share some CSS codes similar to :hover that can be used in the : part for different effects? I tried looking it up but couldn't find much, so any help would be greatly appreciated. ...

Loop through a nested array and output the playerId, playerName, and playerCategory for each player

update 3: After thorough debugging, I finally found the solution and it has been provided below. let values = { "sportsEntitties": [{ "sportsEntityId": 30085585, "sportsEntityName": "490349903434903490", "sportsEntityStartDate": "7878 ...

Is it possible to incorporate an external SCSS rule without it showing up in the final output?

Assuming there is an scss file with predefined rules such as .btn {..} or .btn-primary... I aim to create my own rules by building upon the existing ones .my-button { @extend .btn @extend .btn-primary } without directly adding the .btn and .btn-prim ...

create a list item that expands to occupy the rest of the available space

I'm having trouble filling the remaining space with the last element in my list. I've tried several solutions, but they all apply to div elements with fixed or variable positions. However, this is a list element that represents a simple menu: &l ...

"Enhancing button design with an adjacent image - the step-by

I am having an issue with my hover dropdown menu where the image is not displaying properly in the main button. When I hover over the user12345 button, the image appears on the left side just before the hover shadow. Below is the code snippet for the dropd ...

Illustration tucked beneath the menu

I am looking to create a landing page for my project similar to the design on this website. I am using Bootstrap 4 and HTML, but struggling to hide the background image behind the navigation bar. Can anyone help with this issue? ...

When using the Django Python rest framework, an error may occur in Chrome stating that there is no 'Access-Control-Allow-Origin' header present on the requested resource. This issue does not seem

Despite my extensive research on various Stackoverflow posts, none have been able to solve the issue I am facing. The error plaguing me is the infamous "...No 'Access-Control-Allow-Origin' header is present on the requested resource..." message ...

Firefox won't trigger the `beforeunload` event unless I interact with the webpage by clicking on it

In my quest to handle the beforeunload event in Firefox, I've encountered a small hurdle. It seems to be working smoothly, but only if the user physically interacts with the page by clicking on it or entering text into an input field. Below is the co ...

Having trouble getting the edits in my SCSS file to reflect in the HTML

After downloading a theme, I attempted to edit the background of the "navbar_fixed" in the <header class="main_menu_area navbar_fixed"> .scss code for custom CSS. However, despite my efforts, the changes made in the .scss file do not reflect in the H ...

An HTML form containing various input fields organized as a JSON string

I need to pass two parameters, param1 and param2, to a servlet. Param1 should be in JSON format, while param2 is a regular input value. param1 = {"id":"userid","name":"username","status":"userstatus"} param2 = add How can I accomplish this using the HTM ...

What are the steps to incorporating HTML code into JavaScript?

Can I insert HTML elements into the view using JavaScript? I am hoping to achieve something like this: <script> <% for @m in @messages %> <h1>i</h1> <% end %> </script> I need it to work seamlessly with Ruby. Not s ...

Tips for aligning text in a stylish way on an Angular Material Button

My angular material button has been customized with increased size and the text is currently offset. Here is the code: <a mat-raised-button class="buttons-class" color="accent">Hello!</a> To increase the size, the following ...

When you set the href attribute, you are essentially changing the destination of the link

UPDATE: I'm not referring to the status bar; instead, I'm talking about the clickable text that leads to a link. /UPDATE I've gone through a few similar posts but couldn't find a solution. I have a link that needs to be displayed. www ...

Learn how to automatically set the checked state of a radio button by toggling another radio button

I have two sets of radio buttons, each with four options. The first set has no default selection (unchecked) using jQuery, while the second set has the first option checked by default. What I'm looking to achieve is that when a radio button in the f ...

Eliminate XML namespaces from HTML content generated through XSL in PHP

In my PHP routine, I am utilizing XSL to convert XML into HTML. The issue I am facing is that xmlns namespaces are being added as attributes to the h2 element during the transformation process. PHP: $url = "http://www.ecb.europa.eu/stats/eurofxref/eurofx ...

Prevent Code Execution on Mobile Devices' Browsers

Could someone provide me with the necessary code to prevent certain elements from displaying on a mobile browser? I am specifically looking to exclude particular images and flash files from appearing on a website when accessed via a mobile browser. Somet ...