CODEWITHSUNDEEP
pythonhtmlcss
Dakota Plemmons
Dakota Plemmons

Reputation: 85

pyFlask - Using stylesheets, html not loading file.css

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): Files arrangement
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?

Upvotes: 2

Views: 826

Answers (2)

Tejas Kadam
Tejas Kadam

Reputation: 1

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"

Upvotes: 0

Dakota Plemmons
Dakota Plemmons

Reputation: 85

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.

Upvotes: 3

Related Questions