Alice
Alice

Reputation: 57

HTML is not applying CSS

I am very new to HTML and CSS. I am trying to link my CSS and JS file to my HTML file, but it is not working. I have looked at many other Stack Overflow questions & answers on this problem, and none of the solutions seemed to have worked. Is there some sort of typo/problem that I am overlooking?

    website
    |home
        |_static
            |_home
                |_styles.css
                |_main.js
        |_templates
            |_home
                |_base.html

This is the top of my base.html file

  <head>
        {% load static %}
        <link rel="stylesheet" href="{% static '../home/styles.css' %}">
        <script src="{% static 'home/main.js' %}"></script>
        <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
        <meta charset="UTF-8">
        <title>Title</title>
    </head>

Here is the relevant code from settings:

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

and later

STATIC_URL = '/static/'

Here are the error messages in Command Prompt:

[05/Jun/2019 13:58:15] "GET /home/ HTTP/1.1" 200 1014
Not Found: /home/styles.css
[05/Jun/2019 13:58:15] "GET /static/home/main.js HTTP/1.1" 404 1660
[05/Jun/2019 13:58:15] "GET /home/styles.css HTTP/1.1" 404 2304

Upvotes: 2

Views: 105

Answers (2)

Işık Kaplan
Işık Kaplan

Reputation: 2982

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

If this is your entire installed apps, it looks like you haven't installed your own app, and that means staticfiles apps doesn't check that directory since it is not an installed app.Adding your app here would add it to the searched paths and django-dev-server would serve the statics.

Upvotes: 1

Walucas
Walucas

Reputation: 2568

change your ../ like this:

 <link rel="stylesheet" href="{% static 'home/styles.css' %}">

Upvotes: 0

Related Questions