pyFlask - Using stylesheets, html not loading file.css

Question

I am trying to style a website using a stylesheet.css file. In one of my html pages, I have the <link rel="stylesheet" href="stylesheet.css"> element. The css file is in my templates folder (image):
When I start the application and go to a page, The console reads:
"GET /home/stylesheet.css HTML 1.1/" 200

But the page doesn't appear to load correctly (meaning none of the CSS settings are applied). I am using repl.it to run this website.
Here is the link to the repl: sm--supermechm500.repl.it [REPL.IT]

Here is my css file:

@import url('https://fonts.googleapis.com/css?family=Aldrich&display=swap');
body {
  align-items: center;
  text-align: center;
  background-color: #000000;
  width: auto;
  height: auto;
  font-family: 'Aldrich', sans-serif;
}

I have already reviewed this question: Application not picking up css file , but I didn't quite understand the answer provided, or the question's code.

What is the proper way to make flask render a page using a stylesheet?

The 200 in "GET /home/stylesheet.css HTML 1.1/" 200 indicates that the file has been loaded. What do you mean by the page doesn't appear to load correctly? Are none of your CSS settings applied, or is it just an issue with the font? Try to browse to the CSS file directly with your browser and check the content. — Mike Scotty
– Mike Scotty, Commented Oct 21, 2019 at 12:39
The CSS code isn't applied, if that's what you are asking me. It's broken. — Dakota Plemmons
– Dakota Plemmons, Commented Oct 21, 2019 at 15:03
@ChrisW. No, there isn't. Also I am using repl.it. Let me add that in the post. I'll provide a link to the repl. — Dakota Plemmons
– Dakota Plemmons, Commented Oct 23, 2019 at 11:17

Dakota Plemmons · Accepted Answer · 2019-10-23 18:54:45Z

3

After some research, I found that I have done it all wrong.

I needed a "static" folder in my directory, in which is another folder named "css". In that folder is the stylesheet.css

/ = folder

main.py
/templates
    pages.html

/static
    /css
        stylesheet.css

other_files.txt

And within the html, replace
<link rel="stylesheet" href="stylesheet.css">
with
<link rel="stylesheet" href="{{ url_for('static', filename='css/stylesheet.css') }}">

And just a note, just because the console says status code "200" FOUND doesn't mean it was loaded, or loaded correctly.

answered Oct 23, 2019 at 18:54

Dakota Plemmons

8510 bronze badges

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

Comments

Sabaoon Bedar · Accepted Answer · 2021-09-23 03:41:52Z

0

To be more specific, actual solution is

To create a "css" folder in "static" folder.
Add css in path of ".css" file
Change => href="{{ url_for('static', filename='stylesheet.css') }}" to href="{{ url_for('static', filename='css/stylesheet.css') }}" OR
Change => href="../static/main.css" to href="../static/css/main.css"

edited Sep 23, 2021 at 3:41

Sabaoon Bedar

3,7652 gold badges33 silver badges41 bronze badges

answered Sep 22, 2021 at 15:10

Tejas Kadam

12 bronze badges

Collectives™ on Stack Overflow

pyFlask - Using stylesheets, html not loading file.css

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related