Menu
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.
801
Note: There are two different ways to import a CSS file into another using @import url(“style2. css”); or @import “style2. css”; or directly import any CSS file or multiple CSS file in the HTML file directly within <style>@import “style1.
CSS stylesheets are considered static files. There is no interaction with their code, like there is with HTML templates. Therefore, flask has reserved a separate folder where you should put static files such as CSS, Javascript, images or other files. That folder should be created by you and should be named static.
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
Try
CTRL+SHIFT+R
in Chrome to reload the CSS.
On Mac try:
CMD+SHIFT+R
Otherwise right-click on the page in Chrome, select Inspect and select the Console tab to see what errors you get.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
