# css styles not showing on index.html file, however, they are showing on base.html
**URL:** \
**Category:** Templates & Frontend\
**Created:** [November 18, 2024, 11:45am UTC](https://forum.djangoproject.com/t/css-styles-not-showing-on-index-html-file-however-they-are-showing-on-base-html/36527 "2024-11-18T11:45:56Z")\
**Posts on this page:** 19\
**Page:** 1
I can add and edit css styles on base.html file.
I have another file index.html, which extends from ‘base.html’ using django.
However, i dont know why the css code doesnt work for index.html.
the **base.htm** file
```auto
type or paste code here
{% load static %}
{% load blog_tags %}
{% block title %}
{% endblock title %}
{% block main %}
{% endblock main %}
```
The **index.html** file
```auto
{% extends 'base.html' %}
{% load static %}
{% load blog_tags %}
{% block title %}
{{ main_page }}
{% endblock title %}
{% block main %}
Industrial Gas Supplier
{% endblock main %}
```
the **style.css** file
```auto
.ball {
position: absolute;
border-radius: 100%;
opacity: 0.7;
}
#carouselExample {
height: 300px;
width: 300px;
}
```
The applied style and js code on base.html are working great. But they dont work for index.html
I uploaded all the routes, wrote the code in settings.py correctly. But still now working for index.html
---
Welcome @cozanostra7 !
Your two `
**Author:**  [@philgyford](https://forum.djangoproject.com/u/philgyford)\
**Post date:** [November 18, 2024, 1:45pm UTC](https://forum.djangoproject.com/t/css-styles-not-showing-on-index-html-file-however-they-are-showing-on-base-html/36527/3 "2024-11-18T13:45:07Z")
But the CSS and JS files in index.html are also in base.html, outside blocks.
So you should be able to remove them from index.html. But, also, it should be working, and I’m not sure why it isn’t.
Can you see a request for the style.css file in the logs when you load the page in the browser?
---
This _should_ be working, even though you’ve made some mistakes. For starters, in your index.html file, remove the link tags and the script tags - these are not doing anything because they are not inside blocks, and you’ve already included them in your base.html file anyway. Then open your developer tools, go to the network tab and reload the view that uses the index.html file. You should see requests for the CSS and the JavaScript files.
If not, then you need to do more troubleshooting. I assume you’re running locally, so make sure you’ve got DEBUG set to True, and I also recommend installing and configuring django-debug-toolbar as that will give you lots of info about what’s going on with your templates.
Is it possible that you’re inheriting the wrong base.html? Do you have multiple templates called base.html?
---
> Its says Not Found: /…
What does? If there is more of the error message, please show it in full and describe where it comes from (your browser (if so, for what URL)? your logs? your browser’s Network tab?).
When you say the CSS “doesn’t work for index.html” can you describe what you mean in a lot more detail? What are you changing, in what file?
---
Hi dear!
May i share the developer tool with ypu?
Here is the screenshot:
a
Please kindly check it
---
here it is:
f
this folder is in “portfolio” project folder, not in the app folder
---
And do you have your static files properly configured in settings.py. Should look something like this:
```python
# The path that the static files will be served from
STATIC_URL = "/static/"
# The directory that collectstatic will collect static files to
STATIC_ROOT = BASE_DIR / "staticfiles"
# The directory that static files will be collected from
STATICFILES_DIRS = [
BASE_DIR / "static",
]
```
---
moreover, newly written codes are not shown on developer tools:
---
OK, for starters - you shouldn’t have STATIC\_ROOT set to `BASE_DIR / 'static'`. This will confuse Django when you run the `collectstatic` command. Running `collectstatic` will look for directories called `static` and copy them into the `STATIC_ROOT` directory. So in your case, you’re telling Django to copy files to the same location that your files are already in. You probably have seen warnings when doing this. The fix is set `STATIC_ROOT` to a different value, e.g. `STATIC_ROOT = BASE_DIR / "staticfiles"` (really that can be anything, but `staticfiles` is a common value used in lots of tutorials.)
I recommend fixing that first.
Also, I mis-read your earlier screenshot. Your static files are being served correctly as can be seen in your last screenshot. So what you are saying is that you are modifying the `style.css` file but the changes aren’t being reflected when you reload the sever? That might be caused by the first issue, or it might just be a browser caching issue.
The last thing I’ll mention is that the way you have configured your urlpatterns is OK for development, but not for production. The easiest thing to do will be to install and configure Whitenoise if you want Django to serve both your Python code and your static files. [Using WhiteNoise with Django - WhiteNoise 6.8.2 documentation](https://whitenoise.readthedocs.io/en/stable/django.html) (you need to do step 1 and 2 at a minimum to get it working)
---
It’s difficult to understand exactly what the issue is or what you have fixed. I’m also not sure why jQuery is now in the mix? Are your styles not being applied or are they not even making it into the styles.css file?
---
well now it says another issue. Here it is …
I think the problem was before , just it didn’t show up
---
This is a different issue than before and you need to read this page to solve it: [How to manage static files (e.g. images, JavaScript, CSS) | Django documentation | Django](https://docs.djangoproject.com/en/5.1/howto/static-files/)
