How to link a main.css to all Django templates? [closed]


Tags: python,css,django

Problem :

I want to be able to call classes in my main.css from all templates I have in Django. Currently, I have it stored in app_name/static/css/main.css. How do I link this to the templates so that I can simply add a class to an html element and have the class apply?



Solution :

I would use a base template containing all your common stuff (JQuery, main.css).

So, you will have a template called base.html will all the basic stuff and placeholders for specific pages content:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}/css/main.css">
    {% block additional_header %}
    {% endblock %}
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

Then, your actual page will be a template with something like this:

{% extends 'base.html' %}
{% block content %}
This is specific content for your page
{% endblock %}

Checkout Django's official documentation. Look for the section titled Template Inheritance.


    CSS Howto..

    How to implement a drag and swap effect in CSS and JS [closed]

    How can I make an unclickable HTML “Ghost” Div?

    How to calculate width of unused space for page with fixed width?

    How To Wrap A Div When Parent Container Shrinks Using CSS

    How do I use css transitions to scale an image and move it at the same time?

    Adding a description to a css image slideshow

    how to change a css class style through javascript?

    How to use pseudo-class :target within an image map

    Customizing ebay store HTML and CSS code (How to?)

    How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

    How to create rolldown content with css?

    JQuery: How to change CSS of elements that are with a certain element in one group

    How does a browser determine which cursor to use if multiple are set via CSS?

    How do you change the modal link color in Foundation?

    How to hide element that is currently mousedover and shown via :hover css pseudo class via jQuery

    How to add an unknown amount of dots to a line depending on length of word?

    How to disable CSS style relatively to a certain parent tag?

    How to auto fit input field after dynamically added spans?

    how to set up responsive columns with pure CSS?

    How to add a border bottom like the image?

    How to achieve straight shadow with CSS?

    How to make Google Preview Button display in a CSS pop-up?

    Panel in Horizontal List item showing behind Button

    Html, table, img & css - how to get text to wrap correctly?

    How to remove pipe separator of the first list item on the line?

    How to style an iframe?

    HOW to combine two element that has different parent in CSS? [duplicate]

    How to change overlay whole div by an image via CSS

    How to get SASS working with RequestReduce?

    How to maneuver between two divs using CSS?