Connecting html with css using django - html

Question

This is the html file that i'm trying to add a star rating for
book_detail.html
{% extends "base.html" %}
{% load static %}
{% block title %}
Block Detail Page
{% endblock title %}
{% block sidenav %}
{% for item in item_list %}
<li>
{{ item.item }}
</li>
{% endfor %}
{% endblock sidenav %}
{% block content %}
<h1 align="center"> Book Detail </h1>
<table align="center" border="2" width="400">
<tr>
<td>
{{ book.name }}
</td>
</tr>
<tr>
<td>
<img src="{% static book.pic_path %}" width="100">
</td>
</tr>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<td>
{{ book.username }}
<div id="full-stars-example">
<div class="rating-group">
<input class="rating__input rating__input--none" name="rating" id="rating-none" value="0"
type="radio">
<label aria-label="No rating" class="rating__label" for="rating-none"><i
class="rating__icon rating__icon--none fa fa-ban"></i></label>
<label aria-label="1 star" class="rating__label" for="rating-1"><i
class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-1" value="1" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating-2"><i
class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-2" value="2" type="radio">
<label aria-label="3 stars" class="rating__label" for="rating-3"><i
class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-3" value="3" type="radio" checked>
<label aria-label="4 stars" class="rating__label" for="rating-4"><i
class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-4" value="4" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating-5"><i
class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-5" value="5" type="radio">
</div>
</div>
</td>
</tr>
</table>
{% endblock content %}
This is the css file that i trying to connect with the star rating on my html file on main.css
#charset "utf-8";
#header {
border-style: none;
width: 800px;
height: auto;
}
#wrapper {
margin-top: 8px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
width: 800px;
}
#leftsidebar {
width: 180px;
height: 350px;
float: left;
}
#nav li {
padding-top: 10px;
padding-bottom: 10px;
list-style-type: none;
border-bottom: thin solid #5F5F5F;
color: #4C4C4C
left: 8px;
list-style-position: inside;
margin-left: -10px;
}
#main{
width: 560px;
float: left;
margin-left: 20px;
margin-right: 10px;
padding-right:10px;
}
#footer{
text-align: center;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 10px;
border-top: thin solid #BBBBBB;
clear: both;
color: #969696;
}
#full-stars-example {
/* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
.rating-group {
display: inline-flex;
}
/* make hover effect work properly in IE */
.rating__icon {
pointer-events: none;
}
/* hide radio inputs */
.rating__input {
position: absolute !important;
left: -9999px !important;
}
/* set icon padding and size */
.rating__label {
cursor: pointer;
padding: 0 0.1em;
font-size: 2rem;
}
/* set default star color */
.rating__icon--star {
color: orange;
}
/* set color of none icon when unchecked */
.rating__icon--none {
color: #eee;
}
/* if none icon is checked, make it red */
.rating__input--none:checked + .rating__label .rating__icon--none {
color: red;
}
/* if any input is checked, make its following siblings grey */
.rating__input:checked ~ .rating__label .rating__icon--star {
color: #ddd;
}
/* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star {
color: orange;
}
/* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star {
color: #ddd;
}
/* make none icon grey on rating group hover */
.rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
color: #eee;
}
/* make none icon red on hover */
.rating__input--none:hover + .rating__label .rating__icon--none {
color: red;
}
}
I'm having trouble making the star rating in the html file connect with the CSS file I have.

Answer 1

In the head of your base.html add:
{% block head %}{% endblock head %}
Then in your book_detail.html add the link to your css:
{% block head %}
<link rel="stylesheet" type="text/css" href="{% static 'foldername/main.css' %}">
{% endblock %}