Need basic help fixing external CSS stylesheet pathing in a Flask application

Question

Sorry for asking such a basic question, but I'm stuck and can't figure out what I am doing wrong. I am developing a small website using Flask, teaching myself web coding along the way.

I have the following file structure:

mathsoc
    mathsoc.py
    mathsoc/templates
        mathsoc.css
        mathsoc_main.html

My mathsoc.py looks like this:

from flask import Flask, render_template
    app = Flask(__name__)

@app.route("/")
def main_page():
    return render_template('mathsoc_main.html')

if __name__ == "__main__":
    app.run(debug=True)

Then mathsoc_main.html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="mathsoc.css"/>
    <title>Some Title</title>
</head>

<body>
<div id="content">
Hello World!
</div>
</body>
</html>

And mathsoc.css looks like this:

#content {
    width:46em;
    background-color: yellow;
}

But mathsoc_main.html cannot find the stylesheet, it appears: it does not apply either of the defined properties to the content. I'm guessing that I'm doing something wrong with <link rel="stylesheet" type="text/css" href="mathsoc.css"/>, but I don't know what. It seems so blindingly obvious, yet no style is loaded!

the default name to store the templates in the dir is to name that dir as templates — Suraj Palwe
– Suraj Palwe, Commented Jul 14, 2015 at 9:53

davidism · Accepted Answer · 2015-07-14 15:41:21Z

2

Change your folder structure to include a static folder.

mathsoc
    mathsoc.py
    templates
        mathsoc_main.html
    static
        mathsoc.css

See http://flask.pocoo.org/docs/0.10/tutorial/folders/

edited Jul 14, 2015 at 15:41

davidism

128k31 gold badges417 silver badges348 bronze badges

answered Jul 14, 2015 at 2:18

tourdownunder

1,8394 gold badges24 silver badges34 bronze badges

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

1 Comment

Aleksey Bilogur Over a year ago

Thanks. Creating a static folder and moving the css file there, then using ` href=static/mathsoc.css, worked for me.

Collectives™ on Stack Overflow

Need basic help fixing external CSS stylesheet pathing in a Flask application

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related