Django CSS in Templates

How it works

Django supplies the asset URL through the static tag; the browser then makes a separate request for the CSS. If a page looks unstyled, inspect the generated URL, response status and media type before changing template inheritance. A template render can prove the link exists but cannot prove the asset was served. The real HTTP lab checks that next boundary separately.

Run in the supplied local Django project

This lesson uses Django 5.2.18 LTS with Python 3.12. Download the source downloader and run node download-project.mjs http://127.0.0.1:8000 with Node 22 while previewing locally. It creates a new bhylu-django-lab folder and refuses to overwrite an existing one. After deployment, the default base is bhylu.com; until then use your local preview URL.

Inside that new folder, create a virtual environment, install requirements.txt and run the complete lesson file shown below. Every lesson creates a fresh in-memory SQLite database and temporary upload storage. It does not edit the interactive lab’s db.sqlite3 or Bhylu’s database. The visible listing below is the lesson’s core code; its complete downloaded file includes the shared bootstrap.

Django does not run in Bhylu’s current browser playground. No Apache, MySQL or global PHP configuration change is needed. See the setup lesson for the full project and commands.

Example

Run .venv\Scripts\python.exe lessons\asset-templates.py from the downloaded project root. Download the complete lesson file; keep it under lessons/. The project’s shared models, forms, views and fixture are prerequisites, not a hidden online runtime.

html = Client().get("/").content.decode()
print('href="/static/workshops/site.css"' in html)
print(html.count('rel="stylesheet"'))
print('<main>' in html)

Expected result

True
1
True

The base template supplies one stylesheet link and a main landmark. The child list template does not duplicate either piece. The styling belongs to this separate teaching project and does not alter Bhylu’s blue light/dark UI.