Here is my project hierarchy:
Project
Here is my HTML file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='custom.css') }}"/>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
My .py flask file :
from flask import Flask, render_template, redirect, json, url_for, request, abort
from pymongo import MongoClient
client = MongoClient()
db = client.web_zoo
app = Flask(__name__)
@app.route('/')
def index():
return render_template('home.html')
if __name__ == "__main__":
app.run(debug=True)
And my CSS file :
body {
color: green;
}
h1 {
color: orange;
}
The HTML and .py files work fine and the HTML is rendered and displayed on the page. However the CSS doesn't change. It just displays it in normal black text.
NOTE : All those imports are there as I was doing something else. I stripped off everything else and still have this problem.
I can link bootstrap to it, and the CSS works, but not for my own CSS files.
I have looked at and tried these following solutions :
CSS Problems with Flask Web App
Application not picking up .css file (flask/python)
best way to override bootstrap css
It's probably quite obvious but I'm stuck. Any help? Thanks in advance!
EDIT - I have added a picture of the project hierarchy now instead of just a list. As you can see there are some other HTML files in there too, but none are used nor referenced.
