1

I am trying to create a website using Flask, but while my HTML file is working, my CSS file is not working. I have tried refreshing my cache and using different lines of code others have posted on similar questions, but nothing has worked for me.

This is my current project hierarchy:

This is my current project hierarchy

I have the following line of code in my HTML file's head.

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

I got this code from a different stack overflow question too, so I am quite confused on what I am doing wrong too.

Application not picking up .css file (flask/python)

Thanks in advance!

Ram
  • 21
  • 3
  • check chrome dev-tools to see if your css file is downloaded (and used) – DanielM Jun 05 '19 at 18:50
  • it doesn't seem to be downloaded/used. If i navigate through the sources tab, i can find an old version of my css file though, which is weird. – Ram Jun 05 '19 at 19:04
  • Have you tried disabling you cache? In chrome, from th DevTools window, go to the Network tab and make sure the Disable Cache box is checked. – jacob Jun 05 '19 at 19:22
  • 1
    Possible duplicate of [Application not picking up .css file (flask/python)](https://stackoverflow.com/questions/22259847/application-not-picking-up-css-file-flask-python) –  Jun 05 '19 at 19:23
  • What was the actual problem? You accepted the answer, but without more information, this is not a good question. –  Jun 27 '19 at 00:42
  • I'm not sure, I copy pasted your code and it worked. – Ram Jun 28 '19 at 17:58

2 Answers2

1

I could not duplicate your problem with the following toy example:

#!venv/bin/python
from flask import Flask
from flask import render_template

app = Flask(__name__)

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

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

My directory layout is

├── app.py
├── static
│   └── css
│       └── mainpage.css
├── templates
│   └── index.html
└── venv

The contents of index.html:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/mainpage.css') }}">
<title>Page Title</title>
</head>
<body>

<h1>Page Heading</h1>
<p>A paragraph.</p>

</body>
</html>

The contents of mainpage.css:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}
0

Try adding the following piece of code in the head section

<link rel="stylesheet" type="text/css" href="/static/css/mainpage.css">
Neha Anand
  • 1
  • 1