Why isn't the link between CSS and HTML working?

I'm using flask on atom editor to create a website. In the link I'm referring to the right path where the CSS file is placed, and still when I try loading the page I get it without CSS. I tried changing paths several times it still wouldn't work. After inspecting the web page I noticed an Error 404 file not found referring the CSS file, any ideas? Below is the code:

<!DOCTYPE html>
<html>
  <head>
    <title>Flask App</title>
    <link rel="stylesheet"  href="/app4/css/main.css">
  </head>
  <body>
    <header>
      <div class="container">
        <h1 class="logo">Ardit's web app </h1>
        <strong><nav>
          <ul class="menu">
            <li><a href="{{ url_for('home') }}" > Home</a></li>
            <li><a href="{{ url_for('about') }}" > About</a></li>
          </ul>
        </nav></strong>
      </div>
    </header>
    <div class ="container">
      {%block content%}
      {%endblock%}
    </div>
  </body>
  </html>

enter image description here

3 answers

  • answered 2020-06-01 18:24 Fred Adams

    While I don't know which directory is the root of the web server you are running this on (which has made it somewhat harder for me to give a specific answer with confidence that it is correct), you could try a relative path, like:

    <link rel="stylesheet"  href="./app4/css/main.css"> <!-- '/' changed to './' -->
    

    If the root of your server is the "app4" directory, then you could try

    <link rel="stylesheet"  href="/css/main.css"> <!-- '/app4' removed -->
    

    I hope this helps.

  • answered 2020-06-01 18:40 Nandan Pandey

    Try it

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

    Put it in your html file to access css

  • answered 2020-06-01 19:24 Georges Francis

    I failed to mention before that I'm using flask to create the website, and that I'm rendering an html template, sorry about that. The problem was solved after creating a static folder and placed the CSS file inside, after that in the link using the url_for function worked. I replaced: href="/app4/css/main.css with: href="{{url_for('static', filename='css/main.css')}}" and that did the trick. Thanks for the help.