I've got a base.html file, which all other pages inherit from. Base links to main.css for style class definitions. However, so far this effect isn't being realized.
Base.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
{%block head%}
{%endblock%}
<link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}"/>
{% if title %}
<title> {{title}} </title>
{%endif%}
</head>
<body>
<h1>Task Master</h1>
{%block body%}
{%endblock%}
</body>
</html>
index.html
<!DOCTYPE html>
{%extends "base.html"%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>
{%block body%}
<div class="content">
<table>
<tr>
<th>Task</th>
<th>Added</th>
<th>Actions</th>
</tr>
{%for task in tasks%}
<tr>
<td>{{task.content}}</td>
<td>{{task.date_created.date()}}</td>
<td>
<a href="/delete/{{task.id}}">Delete</a>
<br>
<a href="/update/{{task.id}}">Update</a>
</td>
</tr>
{%endfor%}
</table>
<form action="/" method="POST">
<input type="text" name="content" id="content"/>
<input type="submit" value="Add Task"/>
</form>
</div>
{%endblock%}
</body>
</html>
main.css
.h1{
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
And lastly, app.py
from flask import Flask, render_template, url_for,request,redirect
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
db = SQLAlchemy(app)
class Todo(db.Model):
id = db.Column(db.Integer,primary_key=True)
content = db.Column(db.String(200),nullable=False)
date_created = db.Column(db.DateTime,default=datetime.utcnow)
def __repr__(self):
return f'<Task {self.id}>'
@app.route('/',methods=['POST','GET'])
def index():
if request.method == "POST":
task_content = request.form['content']
new_task = Todo(content=task_content)
try:
db.session.add(new_task)
db.session.commit()
return redirect('/')
except:
return "Failure to add content."
else:
tasks = Todo.query.order_by(Todo.date_created).all()
return render_template('index.html',title='index',tasks=tasks)
@app.route('/delete/<int:id>')
def delete(id):
task_to_delete = Todo.query.get_or_404(id)
try:
db.session.delete(task_to_delete)
db.session.commit()
return redirect('/')
except:
return 'Task cannot be deleted'
@app.route('/update/<int:id>',methods=['GET','POST'])
def update(id):
task = Todo.query.get_or_404(id)
if request.method == "POST":
task.content = request.form['content']
try:
db.session.commit()
return redirect('/')
except:
return 'Cannot update task'
else:
return render_template('update.html',task=task)
if __name__ == "__main__":
app.run(debug=True)
What I'd like is for anything in an <h1> tag in base.html to be formatted according to the h1 definition on main.css. What do I need to do to achieve this effect?
