Search code examples
pythoncssflaskweb-applications

CSS not being applied to HTML page in Flask


I am implementing a flask based webpage and my CSS is failing to load. When I start the flask program and access the test page, I can see the HTML content, but the CSS fails to load at all,and shows a 404 error in the command line. I am using the recommended file structure for holding static webpages, and I am holding all of my CSS files in the static folder. My HTML templates work, and I'm accessing them in the same way. My flask code is included below as well.

enter image description here

import os
import logging

from flask import Flask, render_template
from flask_caching import Cache


# Change the format of messages logged to Stackdriver
logging.basicConfig(format="%(message)s", level=logging.INFO)

config = {
    "DEBUG": True,  # some Flask specific configs
    "CACHE_TYPE": "SimpleCache",  # Flask-Caching related configs
    "CACHE_DEFAULT_TIMEOUT": 300,
}


TEMPLATE_DIR = os.path.abspath(
    "D:/User/Documents/GitHub/CSC 172/Dandyhacks2021/Flask/templates"
)
STATIC_DIR = os.path.abspath(
    "D:/User/Documents/GitHub/CSC 172/Dandyhacks2021/Flask/static"
)

print(STATIC_DIR)

app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)
app.config.from_mapping(config)
cache = Cache(app)


@app.route("/")
def home():
    return render_template("home.html")


@app.route("/homepage")
def homepage():
    return "Homepage placeholder or some shit"


@app.route("/cache")
@cache.cached(timeout=50)
def cachedpage():
    return "Cached for 50 seconds"


if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 8080)))

Here's the HTML

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

<head>
    <meta charset="utf-8">
    <title>Léelo</title>
    <link rel="stylesheet" href="/Flask/static/homepagestyle.css">
</head>
<img id="logo" src="Flask/images/Léelo.png" alt="Léelo"><br>
<nav class="menu">
    <ul>
        <li><a href="home.html" target="blank">HOME</a></li>
        <li><a href="libros.html" target="blank">LIBROS</a></li>
        <li><a href="..." target="blank">LITERATURA</a></li>
        <li><a href="..." target="blank">MARKET PLACE</a></li>
    </ul>
</nav>
<p></p>

<body div style="background-image: url(images/background.png);">
    <div class="container">

        <section class="lead">
            <h1>QUIÉNES SOMOS?</h1>
            <p><strong>Lorem Ipsum.</strong> El libro empieza con nuestro narrador contando que cuando tenia solo 6
                años, por algo que leyó en un libro, dibujó una boa comiéndose un elegante. Orgulloso de su dibujo,
                decide enseñárselo a las personas mayores, pero éstas piensan que es un sombrero. Al no entender su
                dibujó, ellos le dicen que deje de dibujar y mejor se dedique a las matemáticas o la gramática.
                Desilusionado, sigue su consejo.</p><br>
            <h1>CUÁL ES NUESTRA META?</h1>
            <p>El libro empieza con nuestro narrador contando que cuando tenia solo 6 años, por algo que leyó en un
                libro, dibujó una boa comiéndose un elegante. Orgulloso de su dibujo, decide enseñárselo a las personas
                mayores, pero éstas piensan que es un sombrero. Al no entender su dibujó, ellos le dicen que deje de
                dibujar y mejor se dedique a las matemáticas o la gramática. Desilusionado, sigue su consejo. </p>
        </section>
        <footer>
            <p>Made by: Team Goat</p><br>
        </footer>
    </div>
    <p></p>
</body>

</html>

Solution

  • try removing Flask from /Flask/static/homepagestyle.css so it looks like this

     <link rel="stylesheet" href="/static/homepagestyle.css">