0
0
DjangoHow-ToBeginner · 4 min read

How to Add CSS and JS in Django Template Easily

To add CSS and JS files in a Django template, first place them in your app's static folder, then load static files in the template with {% load static %}. Use the <link> tag for CSS and the <script> tag for JS with the static file path inside {% static 'path/to/file' %}.
📐

Syntax

In Django templates, you use the {% load static %} tag to enable static file handling. Then, include CSS and JS files using HTML tags with the {% static %} template tag to refer to their paths.

  • {% load static %}: Loads the static files template tag library.
  • <link href="{% static 'css/style.css' %}" rel="stylesheet">: Adds a CSS file.
  • <script src="{% static 'js/script.js' %}"></script>: Adds a JavaScript file.
django
{% load static %}

<!-- Add CSS -->
<link href="{% static 'css/style.css' %}" rel="stylesheet">

<!-- Add JS -->
<script src="{% static 'js/script.js' %}"></script>
💻

Example

This example shows a simple Django template that includes a CSS file for styling and a JS file for interactivity. Both files are stored in the static folder of your Django app.

django
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django Static Files Example</title>
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>
<body>
    <h1>Welcome to Django Static Files</h1>
    <button id="clickMe">Click me</button>

    <script src="{% static 'js/script.js' %}"></script>
</body>
</html>
Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Django Static Files Example</title> <link href="/static/css/style.css" rel="stylesheet"> </head> <body> <h1>Welcome to Django Static Files</h1> <button id="clickMe">Click me</button> <script src="/static/js/script.js"></script> </body> </html>
⚠️

Common Pitfalls

  • Forgetting to add {% load static %} at the top of your template causes static tags to fail.
  • Not placing CSS and JS files inside the static directory or misnaming paths leads to 404 errors.
  • Not running python manage.py collectstatic in production when using static files can cause missing files.
  • Using relative paths without {% static %} breaks links when static files are served from a different location.
django
{% comment %} Wrong way: Missing load static {% endcomment %}
<link href="static/css/style.css" rel="stylesheet">

{% comment %} Right way: {% endcomment %}
{% load static %}
<link href="{% static 'css/style.css' %}" rel="stylesheet">
📊

Quick Reference

Remember these key points when adding CSS and JS in Django templates:

  • Always start your template with {% load static %}.
  • Use {% static 'path/to/file' %} inside href or src attributes.
  • Place your static files inside the static folder of your app or project.
  • In production, run collectstatic to gather all static files.
✅

Key Takeaways

Always use {% load static %} at the top of your Django template before referencing static files.
Place CSS and JS files inside your app's static directory and reference them with {% static 'path' %}.
Use tags for CSS and