Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML Docs Not Updating from CSS
Web pages are made using a variety of fundamental technologies, HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) being the primary ones. HTML provides structure to the page, while CSS is responsible for the (visual and aural) layout for a variety of devices.
CSS can be added to HTML documents in three different ways: Inline - when the <style> attribute is used within HTML elements. Internal – when a <style> element is inserted into the <head> section. External – when an external CSS file is linked to HTML code using the <link> element.
Suppose you are making a Django app using HTML and CSS and you come across a situation where the CSS styling is not reflected in the HTML document even though you have linked the CSS file to the document. The .css file is in the same path as the .html file and yet the changes fail to reflect in the HTML doc. The code is as shown below.
<head>
<link type= "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>HTML Document</title>
</head>
When you hover over the external stylesheet link, you can press ctrl and click it and it will get displayed in a new window denoting that the .css file has been linked successfully to the .html file and it is not the reason behind the problem. If generic methods like restarting the server/app, creating a different personalized folder for the css file, changing the href of the css file etc. fail then you should consider clearing out the CDN and browser cache.
Browsers can frequently cache files independently of server directives. If you add or change in-line CSS or JavaScript and do not see the changes reflected in the HTML source, the page is most likely cached. When you add/modify CSS or JavaScript in files, the file may be cached. The solution could be to 1) ensure that CSS and JavaScript are properly enqueued and 2) update the server parameter. Updating the server forces the browser to download the file again, which is a good mechanism for busting not only the browser cache, but also the CDN cache.
Static assets will be cached if the CDN is enabled. If you don't want to break the cache with parameters, you should be able to achieve the same result by flushing the CDN cache. (However, in this case, it is up to the browser to make the request.)
Even after clearing out the cache if the problem is persistent you might have to look into the settings section of Django.
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"),
]
Make a static and templates directory in the project root or wherever you want, and set "DIR" in TEMPLATES for templates and static for static files for js and css files. You must place your js and css files in the static directory. You can also create a directory called "js" within the static directory. keep js files and make a "css" directory within static for css files Now, render your HTML file in the view shown below.
from django.shortcuts import render
def index (request):
return render(request, "index.html")
Now you will be able to load static files in your template files.
<!DOCTYPE html>
<head>
{% load static %}
<script src= "{% static 'my_app.js' %}"></script>
<title> Website </title>
</head>
<body>
<img src= "{% static 'img1.png' %}" alt= " my image" />
{% block content %}{% endblock %}
</body>
</html>
Add {% load static %} to the HTML files as well.
{% 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>
Lastly, modify settings.py as per the below snippet.
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static",
]
Also, in your root project (where manage.py is declared), you should have a static folder, and in your static folder, you should have styles, and in your styles, you should have your style.css file.
The folder path should appear something like this:
static/styles/style.css
176 Views
