Python Flask Basics Templates and Static Files Static Files

David Ton-Lai
David Ton-Lai
3,268 Points
Posted by David Ton-Lai
David Ton-Lai
3,268 Points

My styles.css isn't being applied

My styles.css isn't being applied, I'm using a local environment with my styles.css file in a 'static' directory. Here is the code for my layout.html

<!DOCTYPE html>
<html lang="en">
    <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 from Treehouse! </p>
</body>
</html>

3 Answers

james south
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,257 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,257 Points

remove the leading / from the path. for example, if you had a folder called Project, and inside are your html file and another folder called static, and the css is inside the static folder, the correct path would be "static/styles.css" and adding the leading / like you have it will break it and not apply the css file.

David Ton-Lai
David Ton-Lai
3,268 Points
David Ton-Lai
David Ton-Lai
3,268 Points

Thank you James! I just followed the lesson, but I guess it's different because he's working from the Work Station!

Diane Leigh
Diane Leigh
16,812 Points
Diane Leigh
Diane Leigh
16,812 Points

If you use CTRL + SHIFT + R instead of the refresh button you will see the changes in chrome.

Brian Young
Brian Young
5,708 Points
Brian Young
Brian Young
5,708 Points

Yea, that's not working for me...

<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}Flask Basics{% endblock %}</title>
        <link rel="stylesheet" href="/static/styles.css">
    </head>

        <body>
            {%block content%}{%endblock%}




        <footer>Brought to you by the fine folks at Treehouse!</footer>
            </body>
</html>

So as you can see, the only difference is the fact that I added a footer..., otherwise the code looks identical to me. Am I missing something? And yes, I tried it without the leading "/" as well with no result...

Everything else has worked as planned in this project.

Kenneth?

Neil Brown
Neil Brown
22,513 Points
Neil Brown
Neil Brown
22,513 Points

I spent ages with the same problem. Turns out there was a typo in the actual "styles.css" file - ":" instead of a ";". Damn stupid mistake.