I'm currently working on building an E-Commerce Website using Django. I have implemented a Bootstrap navbar, but the CSS styles that I obtained from this source are not functioning properly when placed within the {%block css %} tag.
I have attached the HTML file here. Any assistance on this matter would be highly appreciated.
In case anyone requires access to the entire project to better understand the issue, you can find it here.
basic.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>{% block title %} {% endblock %}</title>
<style>
{% block css %}
.navbar {
background-color: #e74c3c;
}
.navbar .navbar-brand {
color: #ecf0f1;
}
<!-- Additional CSS styling goes here -->
......
{% endblock %}
</style>
</head>
.....(Rest of the HTML code is unchanged)
index.html
{% extends 'mainShop/basic.html' %}
{% block css %}
...... (CSS modifications specific to index.html)
{% endblock %}
{% block body %}
...... (HTML structure and content for displaying products)
{% endblock %}
{% block js %}
...... (JavaScript functionality for handling cart items)
{% endblock %}