HTML is not applying CSS

Question

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

Can you show your relevant settings? static root and static url — Işık Kaplan
– Işık Kaplan, Commented Jun 5, 2019 at 21:19
Would you mind posting what you put in the staticfiles_dirs field? — Paula C
– Paula C, Commented Jun 5, 2019 at 21:30

Işık Kaplan · Accepted Answer · 2019-06-05 22:38:45Z

1

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.

answered Jun 5, 2019 at 22:38

Işık Kaplan

3,0422 gold badges16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alice Over a year ago

that has seemed to solve it! such a rookie mistake! thanks so much!

Işık Kaplan Over a year ago

Happens to best of us. Glad I could help!

Walucas · Accepted Answer · 2019-06-05 21:18:12Z

0

change your ../ like this:

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

edited Jun 5, 2019 at 21:18

answered Jun 5, 2019 at 21:10

Walucas

2,5781 gold badge27 silver badges51 bronze badges

2 Comments

CodingChap Over a year ago

For the js file, you should keep that link at the bottom of the body tag.

Alice Over a year ago

@Walucas [05/Jun/2019 14:22:51] "GET /home/ HTTP/1.1" 200 1021 [05/Jun/2019 14:22:51] "GET /static/home/main.js HTTP/1.1" 404 1660 [05/Jun/2019 14:22:51] "GET /static/home/styles.css HTTP/1.1" 404 1669

Collectives™ on Stack Overflow

HTML is not applying CSS

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related