External CSS not working in HTML in Python project

Question

I replaced <style> tag in base.html with an external CSS file. In base.html there is a menu which links to different HTML pages. When I click on any menu item, the page is loading but not CSS.

I tried using <link> tag in homealter.html for CSS to work, but it doesn't work.

base.html

<link href="../static/css/base_style.css" rel="stylesheet" type="text/css">
<div class="menu">
    <table>
        <tr>
            {% with request.resolver_match.url_name as url_name %}
            <td class="{% if url_name == 'home' %}active{% endif %}"><a href="{% url 'home' %}">Resource Wise Analysis</a></td>
            <td class="{% if url_name == 'homealter' %}active{% endif %}"><a href="{% url 'homealter' %}">Land Distance Analysis</a></td>
            <td class="{% if url_name == 'graphsone' %}active{% endif %}"><a href="{% url 'graphsone' %}">Water Type Based Analysis</a></td>
            <td class="{% if url_name == 'graphstwo' %}active{% endif %}"><a href="{% url 'graphstwo' %}">Land Distance Analysis</a></td>
            <td><a href="{% url 'logout' %}">Logout</a></td>
            {% endwith %}
        </tr>
    </table>
</div>
{% block mains %}
{% endblock %}
</body>

homealter.html

{% extends 'base.html' %}
{% block mains %}
{% load staticfiles %}
<link href="../static/css/base_style.css" rel="stylesheet" type="text/css">
<div class="contnt">
<table>
<tr>
    <th>Land Size</th>
    <th>Land Distances Count</th>
    <!--<th>Details</th>-->
</tr>
{% for index, row in yeye.iterrows %}
<tr>
    <td><p>{{index}}</p></td>
    <td>{{row.Distance}}</td>
    <!--<td><a href="{% url 'yearwise' index %}">View Details</a></td>-->
{% endfor %}
</tr>
</table>
<img src="{% static 'images/im1.jpg' %}">
</div>
{% endblock %}

It worked earlier because there was internal CSS in base.html. I need base_style.css to work whenever menu items are selected i.e., in other pages as well.

where do you add <link> ? When you open page in browser and use Ctrl+U to see source code - do you see this link in HTML ? Copy this link from HTML and open in new card in browser - is it loading ? — furas
– furas, Commented Apr 20, 2019 at 14:32
I added <link> in div and also at the top, I also created a body tag, but nothing worked so far. — Dev Sharma
– Dev Sharma, Commented Apr 20, 2019 at 14:35
I don't see <link> in <div>. I see only one link to "../static/css/base_style.css" but it is not external link. Or maybe you mean external folder on disk - browser doesn't have access to external folders on disk for security reason. — furas
– furas, Commented Apr 20, 2019 at 14:39
In homealter.html, <link> is not working, and I removed it. I'll add it again. — Dev Sharma
– Dev Sharma, Commented Apr 20, 2019 at 14:42
to resolve problem you have to show code which you run and full errors which you get. — furas
– furas, Commented Apr 20, 2019 at 14:44

Mark Bailey · Accepted Answer · 2019-04-20 16:15:34Z

2

You should have it just in base.html, but the full path (not relative):

<link href="/static/css/base_style.css"...

or better:

{% load static %}
<link href="{% static 'css/base_style.css' %}"...

answered Apr 20, 2019 at 16:15

Mark Bailey

1,6751 gold badge9 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

External CSS not working in HTML in Python project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related