CSS File not being detected

Question

My CSS file attached to my python code isn't working, and I can't seem to figure out why since there are no errors and I've tried multiple ways of doing this.

Structure:

app{
    |app
        |templates
            |public
                |index.html
    |env
    |static
        |css
            |styles.css

I've attached it to index.html with <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

and in my python file I used

@app.route("/")
def index():
        return render_template("public/index.html")

Everything works perfectly find but the CSS doesn't work on the page: style.css

body {
    color: red;
}

score 3 · Accepted Answer · answered Apr 14 '21 at 17:02

According to your project structure, the static sub-folder is outside the app folder. Consider adding it at the same location as templates.

project
 | -- app
       | -- templates/
       | -- static/

Your <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> should work.

score 0 · Answer 2 · answered Apr 14 '21 at 16:02

0

Perhaps try to put the filename parameter to: `filename='/static/css/styles.css', and see if it works.

answered Apr 14 '21 at 16:02

Fiery

1
2

That didn't seem to work. Though I have noticed when I look in chrome sources, it seems to be generating its own file instead of detecting the styles.css file which is already in the folder. https://gyazo.com/15ec94b4542957f1c51ee815caa16d2e – ohTitus Apr 14 '21 at 16:20
Weird. This should help [link] (https://stackoverflow.com/questions/22259847/application-not-picking-up-css-file-flask-python). I think you are missing `type="text/css"`, that seems to be the issue. – Fiery Apr 14 '21 at 16:35
I've already tried that, failing to make it work. – ohTitus Apr 14 '21 at 16:47

score 0 · Answer 3 · edited Apr 14 '21 at 17:06

0

styles.css or style.css? Check the css file name!

If that is a typo in your question and not in your main code, try reloading your page using Ctrl + Shift + R.

edited Apr 14 '21 at 17:06

Gitau Harrison

3,179
1
19
23

answered Apr 14 '21 at 16:26

trueThari

105
1
8

The names are both styles.css, error in my comment. I reload my page everytime it's updated in debug mode. It still doesn't work. – ohTitus Apr 14 '21 at 16:48
I cannot see any error in here. Are you sure is `` tag inside the head tags of the html file? – trueThari Apr 14 '21 at 16:59

CSS File not being detected

3 Answers3