2

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?

Dakota Plemmons
  • 85
  • 10
  • 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 Oct 21 '19 at 12:39
  • The CSS code isn't applied, if that's what you are asking me. It's broken. – Dakota Plemmons Oct 21 '19 at 15:03
  • Are there any errors in your browser's console? – Chris W. Oct 22 '19 at 20: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 Oct 23 '19 at 11:17

2 Answers2

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.

Dakota Plemmons
  • 85
  • 10
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"
Sabaoon Bedar
  • 3,113
  • 2
  • 31
  • 37
Tejas Kadam
  • 1
  • 2