🎨 #10 - Django Static Files - CSS File | How to Use Static Files in Django | CSS Configuration
🎨 Learn how to add CSS and static files in Django step by step!
In this video, we explain how to configure static files in Django, create a CSS file, and link it to an HTML template using Django template tags.
📌 Topics covered in this tutorial:
✅ What are static files in Django
✅ Configure static files in settings.py
✅ Difference between development and deployment static paths
✅ Create static folder and CSS file
✅ Use {% load static %} template tag
✅ Link CSS file in Django template
✅ Apply CSS to HTML page
This tutorial is perfect for Django beginners who want to add CSS, images, and JavaScript to their projects.
👍 Like the video if it helped
💬 Comment if you face any issues
🔔 Subscribe for more Django & Python tutorials
🧩 Step-by-Step: Django Static Files & CSS
🔹 Step 1: Configure Static Files in settings.py
First, import os at the top:
import os
Then add or update:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
📌 STATICFILES_DIRS is mainly used during development.
🔹 Step 2: Create Static Folder
Create a folder under your project root:
myproject/
├─ static/
│ └─ style.css
├─ templates/
├─ manage.py
✔ This static folder can be shared across multiple apps.
🔹 Step 3: Create CSS File
myproject/static/style.css
🔹 Step 4: Load Static Tag in Template
Open test.html and add:
{% load static %}
🔹 Step 5: Link CSS File in HTML
🔹 Step 6: Run Server
python manage.py runserver
Open browser:
http://127.0.0.1:8000/test
🎉 CSS will be applied successfully!
STATICFILES_DIRS → Development
STATIC_ROOT → Deployment (used with collectstatic)
django static files
django css tutorial
how to add css in django
django static folder
django load static
django staticfilesdirs
#Django
#Python
#DjangoStaticFiles
#DjangoCSS
#WebDevelopment
#DjangoTutorial
#PythonDjango
#BackendDevelopment
#Programming