Adding CSS to API using FLASK

Question

I have been trying to add CSS to my webpage using flask but it's not happening. If I run my webpage independently, it shows the CSS effects. But when I run the python code it displays plain HTML form.

This is HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-g">
    <title>Forms</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>

    <form action="/view" method="POST" enctype="multipart/form-data">
        <div>
            <p>
                <label for="name">Name
                    <input name="name" type="text" placeholder="Enter Name">
                </label>
            </p>
        </div>

        <div>
            <p>E-mail
                <input name="email" type="email">
            </p>
        </div>

        <div>
            <p>Password
                <input name="pass" type="password">
            </p>
        </div>

        <div>
            <p>
                <input name="file" type="file">
            </p>
        </div>

        <div>
            <p>
                <input type="submit">
            </p>
        </div>
    </form>

</body>
</html>

This is the python code:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return render_template("forms.html")

if __name__ == '__main__':
    app.run(host='192.168.1.7', port=int(8000), debug=True)
    print("Server Started successfully")

Well, "{{ url_for('static', filename='style.css') }}" and "C:\Python\test1\static\css\style.css" are clearly different paths. Why don't you just have one <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">? — roganjosh
– roganjosh, Commented May 28, 2020 at 9:24
I did that to check if the HTML file is taking CSS independently. — aayushi
– aayushi, Commented May 28, 2020 at 10:48

Ankit Beniwal · Accepted Answer · 2020-05-28 09:24:58Z

2

There is a slight issue with your code.

Try adding the following as href for stylesheet:

url_for('static', filename='css/style.css')

Argument filename must have the path of file inside static folder.

answered May 28, 2020 at 9:24

Ankit Beniwal

5298 silver badges19 bronze badges

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

1 Comment

Ankit Beniwal Over a year ago

I hope you can now accept my answer, since it worked well.

Collectives™ on Stack Overflow

Adding CSS to API using FLASK

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related