use a css stylesheet on a jinja2 template

All public files (the ones that are not processed, like templates or python files) should be placed into dedicated static folders. By default, Jinja2 has one static folder called static.

This should fix your problem:

  1. Move /templates/styles.css to /static/styles.css

  2. Update your code with following code, that will be translated into correct file location:

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

More info on static files in Jinja2 is here.


<link rel="stylesheet" type="text/css" href="styles.css">

href value must be within quotes.

make sure the file name and path are proper OR try the below

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