Why is my css file not connecting to the html?
For some reason, my CSS code is not connecting with my HTML. I am not sure why this is happening what to do to fix the issue. home.html should be connecting to the CSS file main.css. I have added the static file block to the base.html and home.html since home extends base but the issue is still occurring.
base.html
{%load static%} <!DOCTYPE html> <html> <head> <title>TweetyBird</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" > <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="/">TweetyBird</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Company Registration</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Company Sign in</a> </li> <li class="nav-item"> <a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a> </li> </ul> </nav> </div> </head> {%block staticfiles%} {% endblock %} </nav> {% block content %} {% endblock %} </body> </html> home.html
{% extends 'base.html' %} {%load static%} {%block staticfiles%} <link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" > {% endblock %} <body> {% block content %} <div class="banner"> <div class="app-text"> <h1>Text</h1> <p> Text </p> </div> {% endblock %} </body> main.css
body { background-color: lightblue; } .banner{ width: 80%; height: 70%; top: 25%; left: 130px; position: absolute; color: #fff; } .app-text{ width: 50%; float: left; } .app-text h1{ font-size: 43px; width: 640px; position: relative; margin-left: 40px; } 
Is your CSS file in a different folder from the HTML file? If so, you might want to ../css/main.css instead.
Your link should be in head section. So, change your base.html. Here, it goes:
{% load static%} <!DOCTYPE html> <html> <head> <title>TweetyBird</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" > <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> {% block staticfiles %} {% endblock %} </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="/">TweetyBird</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Company Registration</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Company Sign in</a> </li> <li class="nav-item"> <a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a> </li> </ul> </div> </nav> {% block content %} {% endblock %} </body> </html> *Note:- There were some tags closed which was never opened like inner nav tag. Also, do not forget to use {% load static%} at the top of inheriting htmls.
I’ve had the exact same problem like two weeks ago. It’s important to know which folder you are in. so, it’s not working because the location ‘css/main.css’ is incorrect. try going outside of this folder, maybe back another folder and try looking for the exact location.
