CSS inheritance in Django templates

Question

I want to split my CSS into multiple files to match with each template and app. But the following problem keeps me baffled. In the base.css of my base.html template, I have an element class button declared as following:

.button {
  ...
}

So, all buttons should follow this css. In an app called table, in a template table_view.html that extends base.html

{% extends "base.html" %}
{% load static %}

{% block content %}
<link href="{% static 'css/table.css' %}" rel="stylesheet" />
...
     <button class="btn-avail table">Table</button>
...
{% endblock %}

I have a different format for class btn-avail in table.css. But I could not get it to load and override the base format. If I change the class name to button (of base.css), it reflects the base format. Or if I place btn-avail in the base.css, then its format is correctly reflected.

In my settings.py, here is my static directory:

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

What am I doing wrong? Thanks. Update: here is the folder structure for app table table/static/css/table.css. And the base.css sits here: project_root/static/css.

nthall · Accepted Answer · 2020-10-30 19:13:52Z

1

The CSS snippet you've posted applies to any element with a class of 'button' - the button element you've defined in the template does not have that class.

answered Oct 30, 2020 at 19:13

nthall

2,9251 gold badge29 silver badges37 bronze badges

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

3 Comments

Tristan Tran Over a year ago

I guess my question is why doesn't it load the table.css. I think I may miss something in settings?

nthall Over a year ago

That stylesheet is not getting loaded at all? Can you share a snippet of the rendered HTML?

Tristan Tran Over a year ago

OK, I found out why: something about "caching". I have to refresh the page with Ctrl+F5. I think my settings and folder structure is correct. Thanks. Closing this.

Collectives™ on Stack Overflow

CSS inheritance in Django templates

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related