CODEWITHSUNDEEP
pythonhtmlcssflask
Aleksey Bilogur
Aleksey Bilogur

Reputation: 3846

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

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!

Upvotes: 0

Views: 92

Answers (1)

tourdownunder
tourdownunder

Reputation: 1829

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/

Upvotes: 2

Related Questions