How to connect to css correctly?

Question

I am using flask from pycharm to create a test site. I connected my html to a css file and it made a black screen, so I created a new css file. Unfortunately, the css is connecting only with this css and I can't find out why. Is there something I did wrong?

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Register</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', 
filename='registration_style.css') }}">
    </head>
    <body>
        <h1>HaHa</h1>
    </body>
</html>

app.py code :

from flask import Flask, render_template, url_for

app = Flask(__name__)


@app.route('/')
def registration():
    return render_template('registration_activity.html')


@app.route('/test')
def hello_test():
    return 'Hola!'

if __name__ == '__main__':
    app.run()

Make sure the css file is in a static folder and if you are using blueprints you have to specify where that static folder is and what it is called. But Flask automatically looks for a /static directory to look in. — Kevin H
– Kevin H, Commented Jan 10, 2019 at 19:50
@KevinHernandez I edited my post and placed a link to my project — mihai
– mihai, Commented Jan 10, 2019 at 19:56

Nathan · Accepted Answer · 2019-01-10 20:59:35Z

0

I think you're missing a css link can you add the following to your template:

<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='style1.css') }}">

so your template would look like this:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Register</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='registration_style.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='style1.css') }}">
    </head>
    <body>
        <h1>HaHa</h1>
    </body>
</html>

edited Jan 10, 2019 at 20:59

answered Jan 10, 2019 at 20:51

Nathan

8,2494 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mihai Over a year ago

Well, it can't connect to none of the css files... I think I should take a sync project?

Nathan Over a year ago

Remove the whitespace between your comma and filename within the url_for(...) method. That is my hunch. I would directly copy my css links I posted in my answer, restart your server, and check if that resolved the issue.

mihai Over a year ago

Well, I created a new css file, deleted registration_style.css and style1.css and now works. How is this possible? The code is the same, I just created a new css file?

Nathan Over a year ago

did you restart your server? I.e did you do a python app.py? If so that’s the reason, I’d recommend you run your server in debug mode otherwise new changes aren’t picked up without a manual restart

Collectives™ on Stack Overflow

How to connect to css correctly?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related