Python Flask Basics Templates and Static Files Static Files

css not being applied to add.html

My css is being applied to index.html but not add.html

Layout.html:

<!doctype html>
<html>
    <head>
        <title>{% block title %}Flask Basics{% endblock %}</title>
        <link rel = 'stylesheet' href='static/styles.css'>
    </head>
    <body>
        {% block content %}{% endblock %}
        <p> Brought to you by the fine folks at Treehouse </p>
        {% block scripts %}{% endblock %}
    </body>
</html>

Index.html

{% extends "layout.html" %}

{% block title %}Howdy! | {{ super() }} {% endblock %}
{% block content %}
<h1>Hello from {{name}}</h1>
{% endblock %}

{% block scripts %}
<script src="/static/scripts.js"></script>
{% endblock %}

add.html

{% extends "layout.html" %}

{% block title %}Adding! | {{ super() }} {% endblock %}
{% block content %}
<h1>{{ num1 }} + {{ num2 }} = {{ num1 + num2 }}</h1>
{% endblock %}

1 Answer

Kent Åsvang
Kent Åsvang
18,804 Points

For the Jinja2-templating engine to include a stylesheet you must use the function flask.url_for().

Assuming that your file structure is correct, your html-head should look like this:

    <head>
        <title>{% block title %}Flask Basics{% endblock %}</title>
        <link rel = 'stylesheet' href='{{ url_for("static", filename="styles.css) }}'>
    </head>