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

python html css templates flask
Zack picture Zack · Mar 7, 2014 · Viewed 119.9k times · Source

I am rendering a template, that I am attempting to style with an external style sheet. File structure is as follows.

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /styles
        - mainpage.css

mainpage.html looks like this

<html>
    <head>
        <link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
    </head>
    <body>
        <!-- content -->

None of my styles are being applied though. Does it have something to do with the fact that the html is a template I am rendering? The python looks like this.

return render_template("mainpage.html", variables..)

I know this much is working, because I am still able to render the template. However, when I tried to move my styling code from a "style" block within the html's "head" tag to an external file, all the styling went away, leaving a bare html page. Anyone see any errors with my file structure?

Answer

codegeek picture codegeek · Mar 7, 2014

You need to have a 'static' folder setup (for css/js files) unless you specifically override it during Flask initialization. I am assuming you did not override it.

Your directory structure for css should be like:

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /static
        /styles
            - mainpage.css

Notice that your /styles directory should be under /static

Then, do this

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

Flask will now look for the css file under static/styles/mainpage.css

Related questions

use a css stylesheet on a jinja2 template

I am making a website using html, css, flask and jinja2. I have a page working on a flask server, the buttons and labels etc. are displayed, but the css stylesheet I have is not loaded in. How would I …

Read More
Django gives "GET /static/css/style.css HTTP/1.1" 304 0

ok so My Index.html is <!DOCTYPE html> <html> <head> <title>Kodeworms</title> <link rel="stylesheet" href="{{ STATIC_URL }}css/style.css" /> </head> <body class="…

Read More
Syntax highlighting in <pre> tags

Are there any libraries that will allow me to display code in <pre> tags and highlight the syntax according to the language? I'm imagining something like this: <pre class="python"> class MyClass: """A simple example class""" …

Read More