CODEWITHSUNDEEP
pythonhtmlcssdjango
bojack
bojack

Reputation: 73

Why won't my index.html connect to my index.css file?

My index.html won't connect to my index.css for some reason. I can't see why. Maybe it's the path of files or something. I apologize for such a noob question. My index.css file has a small bit of code just to test out and see if it works.

enter image description here

Here's my index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    {% load static %}
    <link rel="stylesheet" href="{% static 'index.css' %}">
</head>

<body>
    <div class="container">
        <form method="POST">
        {% csrf_token %}

            <div class="form-group">
                <label for="firstName">First Name:</label>
                <input class="form-control" id="firstName" placeholder="Enter first name" name="firstName">
            </div>

            <div class="form-group">
                <label for="">Last Name:</label>
                <input class="form-control" id="lastName" placeholder="Enter last name" name="lastName">
            </div>

            <div class="checkbox">
                <label><input type="checkbox" name="remember">Remember me</label></div></br>
                <button type="submit" class="btn btn-default">Submit</button>
            </div>

            </div>
        </form>
    </body>
</html>

Here's my index.css file:

html {
    background: chocolate;
}

Here's my settings.py file:

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '+-9mn+q&u@lw2_=s7&=zin5d7oxbt#v@9jg%2+a7=#noqd_jyf'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'music.apps.MusicConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]



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 = 'tyran.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        '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',
            ],
        },
    },
]

WSGI_APPLICATION = 'tyran.wsgi.application'

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

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

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',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


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

STATIC_URL = '/static/'

Upvotes: 0

Views: 283

Answers (4)

Sivanesh S
Sivanesh S

Reputation: 1195

There's nothing wrong in the code. I copied your code and ran on my machine. It works fine.

enter image description here

There's no problem in your code. The connection also is too correct. Try doing it in other IDE or manually.

Upvotes: 0

Tiny.D
Tiny.D

Reputation: 6556

You should load the static files with correct way in Django, better to split static files and templates. Here is one solution based on your case:

Fristly, under music folder, create static folder, put your static file index.css.

After that, change the loading css file with this way in your index.html:

{% load static%}
<link rel="stylesheet" href="{% static 'index.css' %}">

Then, it will load the static file.

Update:

make sure index.css is in the path: tyran/music/static/index.css

Upvotes: 3

inostia
inostia

Reputation: 8023

Django is looking for a file called "index.css" relative to your project root, not the template directory. See this documentation (https://docs.djangoproject.com/en/1.11/howto/static-files/#serving-static-files-during-development) about setting up a STATIC_URL directory to tell Django where to look for static assets.

Upvotes: 0

smooth_atonal_sound
smooth_atonal_sound

Reputation: 69

Just give it a hard path instead:

<link rel="stylesheet" href="~/music/templates/music/index.css">

Upvotes: 0

Related Questions