I have started a Flask project and to stay organized I would like to have a css file per html file. A lot of the tutorials online have one css file in the /static/styles.css file. When I run the following code, the css does not seem to be used and the terminal of the flask connection gives:
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 - but it does load the page, just no css. Is there a standard way to have multiple css files in the static directory.
My project structure is:
Dockerfile
docker-compose.yml
venv
app
-> main.py
-> templates
-> index.html
-> static
-> css
-> index.css
My main.py file is :
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')
My index.html file is:
<!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>
My index.css file is:
.menu li {
display: 'inline-block";
border: 2px solid green;
}