How to connect a separate CSS file for additional styling in a Django + Bootstrap project?

Using Django Templates & Frontend
1

Hi guys, I’m currently creating my project and I want to further style the cards on my site. I’ve already styled them using Bootstrap, but I want to change something, and for this I want to create a separate CSS file for additional styling of these cards. Can I somehow connect this CSS file to my card template and do I need to create a separate CSS file at all or should I write all the additional styles in one file?

base.html file

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      {% block title %}

      {% endblock %}
    </title>
    {% comment %}Bootstrap styles{% endcomment %}
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}" />
    {% comment %}Css style{% endcomment %}
    <link rel="stylesheet" href="{% static 'css/base.css' %}" />
  </head>

  <body>
    <header>
      <nav class="navbar navbar-expand-lg nav">
        <div class="container">
          <a href="{% url 'nicepost:home' %}" class="navbar-brand">NicePOST</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
          <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav ms-auto">
              {% if user.is_authenticated %}
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'nicepost:home' %}"><span class="link">Home</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'nicepost:create_post' %}"><span class="link">Create</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'account_logout' %}"><span class="link">Log out</span></a>
                </li>
                <div class="profile-icon">
                  <a class="" href="{% url 'profile' request.user.pk %}">
                    {% if user.profile.profile_img %}
                      <img src="{{ user.profile.profile_img.url }}" alt="{{ user.username }}profile img" class="nav-img" />
                    {% else %}
                      <img src="{% static 'imgs/default.png' %}" alt="default profile img" class="nav-img" />
                    {% endif %}
                  </a>
                </div>
              {% else %}
                <li class="nav-item">
                  <a href="{% url 'account_login' %}" class="nav-link"><span>Log In</span></a>
                </li>
              {% endif %}
            </ul>
          </div>
        </div>
      </nav>
    </header>

    <main>
      {% block content %}

      {% endblock %}
    </main>
    <footer></footer>
  </body>
</html>

index.html file with my cards

{% extends 'base.html' %}
{% block title %}
  Home
{% endblock %}

{% block content %}
  <section class="py-3">
    <!-- Posts -->
    <div class="container">
      {% for post in post_list %}
        <div class="d-flex justify-content-center">
          <div class="card w-100 mt-3" style="max-width: 750px;">
            <div class="card-content">
              <div class="container">
                <h5 class="card-title">{{ post.title }}</h5>
                <p class="cord-text">{{ post.content|truncatewords_html:25 }}</p>
              </div>
            </div>
            {% for post_files in post.post_files.all %}
              {% if post_files %}
                <img src="{{ post_files.files.url }}" alt="" />
              {% endif %}
            {% endfor %}
          </div>
        </div>
      {% endfor %}
    </div>
  </section>
{% endblock %}
2

You already have a separate CSS file – css/base.css – so you could use that. Or is there some reason that’s not possible?

3

Everything works, I just wanted to know if I can connect, for example, a separate CSS file for this page so as not to write additional styles for this page in base.css. Type for a better understanding of where which styles are located

4

It’s up to you to organize the static files on your application. But if you want to have a style sheet for a specific “page” rather than all pages, then you can define a block inside your base.html, that can be “filled” from other templates, like:

# base.html
<html>
  <head>
    {% block extra_head %}{% endblock extra_head %}
  </head>
</html>

Then on you “extended” template, you can fill this block

{% block extra_head %}
<link rel="stylesheet" href="{% static 'your_dir/index.css' %}" />
{% endblock extra_head %}
# ...

Is that what you’re trying to achieve?

1 Like
5

Yes, that’s exactly what I wanted to know, thanks.