css not being applied to add.html

Question

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 %}

Answer 1 · 2018-07-20T10:45:40Z

July 20, 2018 10:45am

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>

Welcome to the Treehouse Community

Looking to learn something new?

Jordan Hembling

Jordan Hembling

css not being applied to add.html

1 Answer

Kent Åsvang

Kent Åsvang

Edward Humphreys

Edward Humphreys