how to load css file in html file already extends another html file (base.html) in django

Question

I'm new to django, so i get difficulty in dealing with django template in relation to adding css file into django template.My code is as follows:

base.html

{% 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 'portfolio/main.css' %}"> {% if title%}
    <title>Django Portfolio - {{title}}</title>
    {% else %}
    <title>Django Portfolio</title>
    {% endif %}
</head>

<body>
    <div class="topnav">
        <a class="active" href="{% url 'portfolio-home' %}">Home</a>
        <a href="{% url 'portfolio-page' %}">Portfolio</a>
        <a href="{% url 'portfolio-about' %}">About</a>
        <a href="#blog">Blog</a>
        <a href="#account">Account</a>
    </div>
    <div class="container">
        {% block content %} {% endblock content %}
    </div>
</body>

</html>

This is my base.html file in which all my other html files inherit it.It works perfectly fine.Note:-I create the static file inside django app and put two static files; main.css and home.css for now. But i want to design homepage, and i av done this with the file known as home.html and use the home.css in static file.My code is as follows:

home.html

{% extends 'portfolio/base.html' %} 
{% load static %}
{% block content %}

    <link rel="stylesheet" type="text/css" href=" {% static 'portfolio/home.css' %}" />
    <h1>My homepage</h1>

{% endblock content %}

The problem is, the line <link rel="stylesheet" type="text/css" href=" {% static 'portfolio/home.css' %}" /> does not work. I need help.

First think to look at when this kind of issue occurs is in your browser dev tools. What's the source HTML? Are there any errors shown (e.g. 404 error)? Second, formally a <link> with rel attribute "stylesheet" is body-ok, so it may appear in the body, however I'm not 100% sure this is accepted by all browsers, as it's very uncommon practice. Which browser are you testing with? — dirkgroten
– dirkgroten, Commented Oct 7, 2019 at 9:11
Your CSS file is getting included in the body iteself, which will not work. Create a {% block extra_css %} {% endblock %} in your base template and paste your code in the same blocks {% block extra_css %} <link rel="stylesheet" type="text/css" href=" {% static 'portfolio/home.css' %}" /> {% endblock %} in the home.html template file — Jaskaran Singh
– Jaskaran Singh, Commented Oct 7, 2019 at 9:31
@JaskaranSingh according to this, the link element with rel set to "stylesheet" is body-ok. You're referring to HTML4 spec, but we live in HTML5 times. I've tested in Safari and Chrome and <link> tags for css inside the <body> work. Again, I'm not sure it works in all browsers and I agree it's better to put it in <head> but I'm not sure this is the reason for OP's problem. — dirkgroten
– dirkgroten, Commented Oct 7, 2019 at 15:08

HollowA · Accepted Answer · 2019-10-07 14:31:25Z

1

<link rel="stylesheet" type="text/css" href="{% static 'portfolio/home.css' %}">

This should work, it's syntactically correct. Are you sure you have your .css file in a folder structure like so: "/APPNAME/static/Portfolio/home.css".

As others have mentioned, you are not including your CSS in the head of the HTML document, it is being placed into the body, inside the {% block content %}.

You need to wrap it in a {% BLOCK CSS %} {% ENDBLOCK %}

{% extends 'portfolio/base.html' %} 
{% load static %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'portfolio/home.css' %}">
{% endblock %}
{% block content %}

etc...

edited Oct 7, 2019 at 14:31

answered Oct 7, 2019 at 8:38

HollowA

1101 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dirkgroten Over a year ago

At the moment, this does not provide an answer to the question. Please use comments when asking for more information.

Lodyne Mark Over a year ago

I have wrapped the link part in block as suggested, seems no changes to the style of my html tags. This means the css file has not been rendered.

Lodyne Mark Over a year ago

I put it like this:- ` {% extends 'portfolio/base.html' %} {% load static %} {% block css %} <link rel="stylesheet" type="text/css" href=" {% static 'portfolio/home.css' %}" /> {% endblock css %} {% block content %} <h1>My Homepage</h1> {% endblock content %}`

HollowA Over a year ago

It's possible that the CSS styles are being overwritten by the CSS in the base.html? Is this perhaps what is happening?

Tomek r · Accepted Answer · 2021-10-13 21:59:33Z

0

It worked for me:

{% extends 'menu.html' %}
    {% load static %}
  
    <body>
    {% block content %}
    
    
    {% block css %}
    <link rel="stylesheet" type="text/css" href="{% static 'moduleone.css' %}">
    {% endblock %}
    
    
    <div class="jumbotron">Test</div>
    
    {% endblock %}
    </body>
    </html>

answered Oct 13, 2021 at 21:59

Tomek r

115 bronze badges

Collectives™ on Stack Overflow

how to load css file in html file already extends another html file (base.html) in django

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related