0

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 :).

Improve this question
4
  • Hi, welcome to StackOverflow ;) If you're getting an error, please post the full error message. Otherwise, does this OS answer help? Commented Apr 17, 2021 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. Commented Apr 17, 2021 at 21:51
  • Your code looks good. May I ask where your style.css is located? Commented Apr 17, 2021 at 23:04
  • This could be a browser cache related issue, so maybe try resetting/deleting the cache on your browser Commented Apr 18, 2021 at 2:08

2 Answers 2

Reset to default
1

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.

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

Comments

0

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') }}">
Improve this answer

Comments