Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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>

5 Answers

james south
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,258 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,258 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,813 Points
Diane Leigh
Diane Leigh
16,813 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,514 Points
Neil Brown
Neil Brown
22,514 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.

Matthew Allcorn
Matthew Allcorn
4,342 Points
Matthew Allcorn
Matthew Allcorn
4,342 Points

Hoping to save people the pain and heartbreak AND time that I experienced from a small but important error - check that your STATIC folder is under the project folder and not hiding in the LAYOUTS folder.

Matthew Allcorn
Matthew Allcorn
4,342 Points
Matthew Allcorn
Matthew Allcorn
4,342 Points

Hoping to save people the pain and heartbreak AND time that I experienced from a small but important error - check that your STATIC folder is under the project folder and not hiding in the LAYOUTS folder.