CSS not applying to html code within {% block bodycontent %}-CodePudding

I'm currently building a website and am having trouble getting the css to apply to parts of my html code. I have a base.html which I want displayed on every page, and I'm using {% block bodycontent %} in different documents to give the different pages specific features. However, I'm finding that the css stylesheet doesn't seem to apply to the code within the block, and is only applying to base.html. I'm using the flask framework, and am not sure if this may be the problem - when I run the html file locally without flask, the styling seems to be working, but of course the page is incomplete, because it is not interacting with the base.

This is my base:

<!DOCTYPE html>
<html lang="en">
<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>Welcome</title>
</head>
<body>


  <div >
    <nav>
      <a href="/">Welcome</a>
        <ul >
          <li> <a href="about_us">About us</a></li>
          <li> <a href="mission_statement">mission statement</a></li>
          <li> <a href="login">Login</a></li>
          <li> <a href="contact"><img src="../static/imag/contact.png" alt="Contact" ></a></li>
        </ul>
      </nav>
  </div>


{% block bodycontent %}
{% endblock bodycontent %}

</body>
</html>

This is my about_us.html:

{% extends "base.html" %}
{% block bodycontent %}
<link rel="stylesheet" href="../static/css/about_us.css">

  <div>
    <h1>Welcome!</h1>
    <h2>About us</h2>
    <p>insert paragraph about us</p>
  </div>

{% endblock bodycontent %}

and finally, this is an excerpt of the css which is aplying only to the base.html - in this case, the .header and nav are applying, but the div etc. aren't.:

.header{
  overflow: visible;
  background-color: White;
  position: sticky;
  padding: 0;
  margin-top: -20px;
  margin-left: -20px;
  margin-right: -20px;
}

nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

div{
  color: DimGray;
  font-family: Helvetica;
}

div h1{
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 100%;
  padding: 10px;
  text-align: center;
}

div h2{
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 100%;
  padding: 10px;
  text-align: center;
}

div p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 100%;
  padding: 10px;
  font-size: 20px;
  text-align: center;
  line-height: 2em;
}

I hope this contains all the information needed to answer the question. Sorry this is so long, I'm new to stack overflow and hope someone can help. Thank you in advance!

CodePudding user response：

In base.html add <link rel="stylesheet" href="path/to/css/file"> in the head of your html.

<!DOCTYPE html>
<html lang="en">
<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">
   <link rel="stylesheet" href="path/to/css/file"> <!-- Here -->
  <title>Welcome</title>
</head>
<body>


  <div >
    <nav>
      <a href="/">Welcome</a>
        <ul >
          <li> <a href="about_us">About us</a></li>
          <li> <a href="mission_statement">mission statement</a></li>
          <li> <a href="login">Login</a></li>
          <li> <a href="contact"><img src="../static/imag/contact.png" alt="Contact" ></a></li>
        </ul>
      </nav>
  </div>


{% block bodycontent %}
{% endblock bodycontent %}

</body>
</html>

CodePudding user response：

Try adding {% load static %}.

<!DOCTYPE html>
<html lang="en">
<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">
   <link rel="stylesheet" href="{% static 'file.css' %}"> <!-- Here -->
   {% load static %}
  <title>Welcome</title>
</head>
<body>
  {% block content %}

  <div >
    <nav>
      <a href="/">Welcome</a>
        <ul >
          <li> <a href="about_us">About us</a></li>
          <li> <a href="mission_statement">mission statement</a></li>
          <li> <a href="login">Login</a></li>
          <li> <a href="contact"><img src="../static/imag/contact.png" alt="Contact" ></a></li>
        </ul>
      </nav>
  </div>

 {% endblock content %}

</body>
</html>