← All tutorials

Templates / 5 MIN READ

Style your Django pages with static files

Add a local stylesheet, use the static template tag, and understand collectstatic.

01 Create a stylesheet

Use the base template from the templates tutorial. Create core/static/core/site.css. Namespacing static files under core avoids collisions with assets from other apps.

Code example
body {
  max-width: 760px;
  margin: 48px auto;
  padding: 0 24px;
  font: 18px/1.7 system-ui, sans-serif;
  color: #183c32;
  background: #f7f9f5;
}
a { color: #17664f; }
input, button { font: inherit; padding: 8px 12px; }

02 Link the stylesheet

Load the static template tag at the top of core/templates/core/base.html, then add the stylesheet link inside its head element. Django resolves the URL using your static-file settings.

Code example
{% load static %}
<!-- Inside <head>: -->
<link rel="stylesheet" href="{% static 'core/site.css' %}">

03 Check local discovery

The default project includes django.contrib.staticfiles. With DEBUG enabled, runserver serves discovered static files for local development. The command below tells you which file Django finds.

Code example
python manage.py findstatic core/site.css
python manage.py runserver

04 Prepare for deployment

For a deployment, set STATIC_ROOT in settings and collect the assets. Configure your production web server to serve that directory at STATIC_URL. collectstatic gathers files; it does not start an asset server. Keep user uploads in a separate media location.

Code example
# config/settings.py
STATIC_URL = "static/"
STATIC_ROOT = BASE_DIR / "staticfiles"

# Run in your deployment shell:
# python manage.py collectstatic --noinput
Keep exploring

Read the official Django documentation for details and more examples.