I am embarking on a Flask project and want to keep things organized by having a separate css file for each html file. Most tutorials available online suggest placing all the CSS code in one /static/styles.css file. However, when I try to run the following code, the CSS does not seem to be applied and the terminal shows an error message like this:
127.0.0.1 - - [01/Nov/2019 20:49:30] "GET /%7B%7B%20url_for('static',%20filename='css/index.css')%20%7D%7D HTTP/1.1" 404 -This is the structure of my project:
Dockerfile
docker-compose.yml
venv
app
-> main.py
-> templates
-> index.html
-> static
-> css
-> index.css
The content of my main.py file is as follows:
from flask import Flask, render_template
app = Flask(__name__)
app.config.from_object(__name__)
# Set-up Flask routes.
@app.route('/')
def index():
return render_template('index.html')
This is my index.html file:
<!DOCTYPE html>
<html lang="en">
{% block head %}
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="test/css" href="{{ url_for('static', filename='css/index.css') }}"/>
</head>
{% endblock %}
<body>
<header>
<div class="container">
<strong><nav>
<ui class="menu">
<li><a href="{{ url_for('index') }}">Home</a></li>
<li><a href="{{ url_for('about') }}">About</a></li>
</ul>
</nav></strong>
</header>
This is what my index.css file looks like:
.menu li {
display: 'inline-block";
border: 2px solid green;
}