Flask, url_for() not linking static file

Question

I'm having trouble linking my static "css" file. When I run the code I only get my basic html and not the css. When I use the html element all of my css code work fine. Here is my code:

h1 {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

.sidebar {
  height: 200px;
  width: 150px;
  position: sticky;
  top: 0px;
  float: right;
  margin-top: 100px;
  padding-top: 40px;
  background-color: lightblue;
}

.sidebar div {
  padding: 8px;
  font-size: 24px;
  display: block;
}

.body-text {
  margin-right: 150px;
  font-size: 18px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
</head>


<body>
  <h1>Header</h1>


  <div class="sidebar">
    <div>Menu Item 1</div>
    <div>Menu Item 2</div>
    <div>Menu Item 3</div>
  </div>

  <div class="body-text">
    <!-- body content -->
  </div>
</body>

</html>

Here is my python code also in case that is causing a problem:

from flask import Flask, render_template, redirect, url_for

app = Flask(__name__)

app.config['ENV'] = 'development'
app.config['DEBUG'] = True
app.config['TESTING'] = True

app.static_folder = 'static'

@app.route('/')
def index():
    return render_template('base.html')

@app.route('/<name>')
def user(name):
    return f"Hello {name}!"

@app.route('/admin')
def admin():
    return redirect(url_for('index', name='Admin'))

if __name__ == '__main__':
    app.run()

Thanks for any help. Sorry if the code is messy, I'm a rookie :).

Hi, welcome to StackOverflow ;) If you're getting an error, please post the full error message. Otherwise, does [this OS answer](https://stackoverflow.com/a/22260791/10753968) help? — half of a glazier, Apr 17 '21 at 21:50
linkage to css looks okay, may I know what problem you have noticed? if css load fails, then you will see 404 on network tab of dev tools. — simpleApp, Apr 17 '21 at 21:51
Your code looks good. May I ask where your `style.css` is located? — Parzival, Apr 17 '21 at 23:04
This could be a browser cache related issue, so maybe try resetting/deleting the cache on your browser — AS11, Apr 18 '21 at 02:08

score 1 · Accepted Answer · answered Apr 18 '21 at 20:04

In addition to the answer given above, this might also occur sometimes if your browser has already cached the CSS file. You can force your browser to refresh the contents using Ctrl+f5 on your keyboard each time you add new code in your style.css file.

Gitau Harrison · Answer 2 · 2021-04-18T20:13:05.030

This may be an issue with the structure of your application. Consider this structure:

project_folder
   | --- app/
          | --- templates/
                 | --- index.html
          | --- static/
                 | --- style.css

The templates sub-folder should be at the same location as the static sub-folder. Your link should work just with this structure.

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">

Flask, url_for() not linking static file

2 Answers2