Html file isn't sinking up with my css file?

Question

All of my html and css and files are in the same templates folder so i don't think that is the problem. I am brand new to frontend development and deeply confused... please help, this is not a good start lol!

-- My base.html file --

<!DOCTYPE html>
<html>
<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">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
    <nav class="navigation_bar">
        <ul>
            <li>
                <a href="/about"><b>about page</b></a>
            </li>
        </ul>
    </nav>
    {% block content %}{% endblock %}
</body>
</html>

-- main.css --

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

body {
    text-align: center;
    font-family: 'Montserrat';
}



.navigation_bar a {
    text-decoration: none;
}

Maybe it is an issue with my css? Thank you!

Could you clarify what the issue is exactly? Your CSS styles aren't being applied to your HTML? — Jack, Apr 03 '20 at 21:21
Maybe it's a caching problem. Did you clear your web browser's cache? — Suboptimierer, Apr 03 '20 at 21:22
do you know how to use chrome's developer tools? check network tab and check to see if all your css file is found, or supply link to website — DCR, Apr 03 '20 at 21:31
Check your browser dev tools' network tab: is `main.css` being loaded correctly? — Terry, Apr 03 '20 at 21:35
This question must get asked here on SO ten times a day. I know it gets asked on forums and around the internet hundreds of times daily. — Rob, Apr 03 '20 at 22:43

score 0 · Accepted Answer · answered Apr 03 '20 at 22:18

I think the problem here is in your server, I assume you are using Flask since you are writing Jinja syntax in your html file, I think the problem is that Flask can't find your css file. you need to tell it exactly where to look for your static file, or you can just make a router to deal with file requests, read the files and send them back to the browser.

The first way

from flask import Flask, render_template

app = Flask(__name__,
            static_url_path='', 
            static_folder='static',
            template_folder='templates')

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

so now Flask will look for your static files inside the folder "static" you need to create it and then put your static files there including your css file, and leave your html file like it is, don't change the path of your css file to include the folder name since Flask will serve it as if it were in the current directory of the script.

The second way

from flask import Flask, render_template, request, Response

app = Flask(__name__)

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

@app.route('/css')
def giveCSS():
  fileContent = ""
  file_name = request.args.get("name")
  if(file_name):
    file = open("css/" + file_name + ".css", "r")
    for line in file:
      fileContent += line
  return Response(fileContent, mimetype='text/css')

I assume you have other css files, you need to change the path of the css file inside the html file to include the query /css/name=main and the css file inside maybe a folder named "css" of course you can change whatever names you don't like but make sure to take care.

Thank You Man! It would've taken me a week to figure that out. The first one worked good! — , Apr 03 '20 at 23:58

Html file isn't sinking up with my css file?

1 Answers1