CODEWITHSUNDEEP
pythonhtmlcssflask
CodeDiggs
CodeDiggs

Reputation: 43

External css file wont load

I am following a youtube tutorial but my CSS won't load. I've tried changing the path and resetting the cache in chrome. I'm at a loss as to what I can change to get it to work. Everything else is working I've seen some other posts like this but I couldn't find an answer at any of those that worked for me. Using VS 2019, Python 3.8

app.py

from flask import Flask, render_template, url_for

app= Flask(__name__)

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

if __name__ == "__main__":
    app.run(debug=True)

index.html

{% extends 'base.html' %}
    
{% block head %}
    <h1>Templated</h1>
{% endblock %}

{% block body %}
    <body>Templates</body>
{% endblock %}

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='/css/main.css') }}" >
    {% block head %}{% endblock %}
</head>
<body>
    {% block body %}
    <link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='/css/main.css') }}">
    {% endblock %}
</body>
</html

main.css

body {
    color: blue;
    margin: 0;
    font-family: sans-serif;
}
h1 {
    color: red;
    margin: 0;
    font-family: sans-serif;
}

path: C:\Users\username\OneDrive\Programming\Visual Studio 2019\Flask Introduction\static\css\main.css

Upvotes: 0

Views: 126

Answers (1)

ng-hobby
ng-hobby

Reputation: 2199

In your base.html and in the link tag remove the first / in path /css/main.css ( => css/main.css ) and change to this and check if it works:

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

You should use relative path not the absolute one.

Upvotes: 1

Related Questions