[SOLVED] Unable to Apply CSS on my HTML file Django

Unable to Apply CSS on my HTML file Django

I have seen alot of solutions here regarding this issue but unable to resolve my problem, I am trying to apply my style.css present on this path \...\static\css I have following directory structure as can be seen in image below:

My settings.py is as follows:

from pathlib import Path
import os

BASE_DIR = Path(__file__).resolve().parent.parent



SECRET_KEY = 'django-insecure-......'


DEBUG = True

ALLOWED_HOSTS = []


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bar_chart',
    'line_chart',
    'Aqi_dash.core',
    'crispy_forms',
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'Aqi_dash.urls'
TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')
TEMPLATES_DIR_2= os.path.join(BASE_DIR,'Aqi_dash/templates')
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            TEMPLATES_DIR,TEMPLATES_DIR_2,
            ],
        'APP_DIRS': True,
        'OPTIONS': {
            
            ],
        },
    },
]

WSGI_APPLICATION = 'Aqi_dash.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE':'django.db.backends.postgresql_psycopg2',
       'NAME':'db_sensors',
       'USER':'postgres',
       'PASSWORD':'....',
       'HOST':'....',
       'POST':'5432',
      'ATOMATIC_REQUESTS':True,
    }
}


AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]



LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


LOGIN_REDIRECT_URL = 'home'
LOGOUT_REDIRECT_URL = 'home'
#EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "css"),
    'static',]

#print(STATIC_DIR)

While my index.html which is present in templates\index.html folder is as follows:

<html lang="en">
    
<head>
    {% load static %}
    <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <title>{% block title %}My Website Name{% endblock %}</title>
</head>

When i run the server by this command

python manage.py runserver

it shows the following error in the terminal:

"GET /style.css HTTP/1.1" 404 2700

Need guidelines how I could provide my correct path in settings.py and in index.html to apply the css correctly?

Need hep please

Solution

I am able to resolve the issue by updating the following line in settings.py

STATIC_DIR = os.path.join(BASE_DIR, 'Aqi_dash/static')

and I have also update the following code in html file:

link rel="stylesheet" href="{% static 'style.css' %}"

and i am able to successfully apply the css on my index.html