'Is there a way to add style to flask app?

I'm trying to add css to my html page in Flask, but it doesn't work. I tried the code in online editor and it works.

HTML page (results.html):

<div>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/results.css') }}">
    <table>
        <thead>
        <tr>
          <th class="text-center">File name</th>
          <th class="text-center">Result</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="red"> 1 </td>
            <td class="yellow">2</td>
        </tr>
        </tbody>
    </table>
    <br>
    <br>
</div>

This is my css (results.css)

table, td, th {
  border: 2px solid;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.red {
background-color: #EE3209;
}

.yellow {
background-color: #F0E20A;
}

I put css file in "styles" folder, under "static" folder.

htmlcssflask


Solution 1:[1]

first of all you need to set (in your app.py) where is your static folder:

app = Flask(__name__,
        static_url_path='', 
        static_folder='templates/static',
        template_folder='templates')

In my example I have a folder "template" then the "static" folder(path ex: myapp/template/static). Inside "static" I created the "CSS" folder (you can also add libraries to the "static"). Since I have my files in it I'll just call them like this:

<link rel="stylesheet" href="/css/mycssfile1.css">
<link rel="stylesheet" href="/css/mycssfile2.css">

I hope it can help you!

Solution 2:[2]

I solved the same problem using: Ctrl + Shift + R. In this way you perform a hard reload of a web page in Google Chrome.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gustavo Iosimura
Solution 2 Henry Ecker

Related Questions