'CSS not applied to the HTML page (Django)

index.html I have changed {% static "/main/css/index.css" %} to {% static "main/css/index.css" %}

 {% extends 'main/base.html' %}
    {% load static %}
    <link rel = 'stylesheet' type="text/css" href="{% static "/main/css/index.css" %}"/>
    {% block title %}
    {{title}}
    
    {% endblock %}
    {% block content %}
    
    <body>
      <div class="grid-wrapper">
        <header class="grid-header">
            <img class="circles" src="{% static "main/img/main8.jpg" %}" alt="main pic">
            <p>hello</p>
        </header>
      </div>
    </body>
    {% endblock %}

index.css

.grid-wrapper {
    display: grid;
    grid-template-columns: 1 fr;
    grid-template-rows: 1 fr;
    grid-template-areas: 'header header';
}

.circles {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

header {
    position: relative;
    width: 100%;
}

p {
    color: red;
    text-align: center;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
}

settings.py

STATIC_URL = 'static/'
STATICFILES_DIRS = [
   os.path.join(BASE_DIR, "main/static"),
]

file's location

I tried changing file names, changing locations, connecting in a different way, but all this does not work. I also changed the settings.

Solution 1:^[1]

This is an example of my configurations:

settings.py

STATIC_DIR = os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    STATIC_DIR,
]

base.html

<!DOCTYPE html>
{%load static%}
<html lang="en">
   <head>

My file structure is:

/Project
  /App
  /Project
    /settings.py
/static
  /styles.css
/templates
  /base.html

You may need to share you directory structure to get further clarifications.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Adrian John

'CSS not applied to the HTML page (Django)

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]