Configure Static Files and Apply External CSS to a Template
📌 Introduction
In Django, static files include:
- CSS
- JavaScript
- Images
👉 These files are stored separately and loaded using {% static %}.
🎯 Program Statement
👉 Configure static files and apply external CSS to a template.
🧠 Why Static Files Are Important
- Styling (CSS)
- Interactivity (JS)
- UI Design
⚙️ Step 1: Configure Static Settings
📁 File: settings.py
🔹 Path:
myproject/myproject/settings.py
🔹 Code:
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
🧠 Explanation
STATIC_URL→ URL prefixSTATICFILES_DIRS→ location of static folder
⚙️ Step 2: Create Static Folder Structure
📁 Project Structure:
myproject/
static/
css/
style.css
⚙️ Step 3: Create CSS File
📁 File: style.css
🔹 Path:
myproject/static/css/style.css
🔹 Code:
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: darkblue;
}
p {
color: #333;
font-size: 18px;
}
⚙️ Step 4: Create Template
📁 File: home.html
🔹 Path:
myproject/templates/home.html
🔹 Code:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Styled Page</title>
<!-- Link External CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<h1>Welcome to Django</h1>
<p>This page is styled using external CSS.</p>
</body>
</html>
⚙️ Step 5: Create View
📁 File: views.py
🔹 Path:
myproject/myapp/views.py
🔹 Code:
from django.shortcuts import render
def home(request):
return render(request, 'home.html')
⚙️ Step 6: URL Mapping
📁 File: urls.py
🔹 Path:
myproject/myproject/urls.py
🔹 Code:
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home),
]
⚙️ Step 7: Run Server
python manage.py runserver
🌐 Step 8: Output
✅ Output Features:
- Light background color
- Styled heading
- Centered text
🧠 How It Works
- Django looks for static files in
static/folder {% load static %}enables static tag{% static 'css/style.css' %}loads CSS- Browser applies styling
🔥 Key Concepts
Load Static
{% load static %}
Link CSS
<link rel="stylesheet" href="{% static 'css/style.css' %}">
Static Folder Path
static/css/style.css
⚠️ Common Errors (VERY IMPORTANT 🔥)
❌ Forgot {% load static %}
👉 CSS will not load
❌ Wrong path
❌ Wrong:
{% static 'style.css' %}
✅ Correct:
{% static 'css/style.css' %}
❌ STATICFILES_DIRS missing
👉 Static folder not detected
❌ CSS not updating
👉 Do:
Ctrl + Shift + R (Hard refresh)
🧪 Practice Questions
- Add multiple CSS files
- Change font and colors
- Create separate CSS for header
- Add background image
🎤 Viva Questions & Answers
1. What are static files in Django?
Static files are files like CSS, JavaScript, and images used for styling and UI.
2. What is STATIC_URL?
It defines the URL prefix for static files.
3. What is STATICFILES_DIRS?
It tells Django where static files are stored.
4. Why use {% load static %}?
To enable static tag inside templates.
5. How to link CSS file?
Using <link> tag with {% static %}.
6. What happens if static not configured?
CSS, JS, images will not load.
7. What is external CSS?
CSS written in a separate file and linked to HTML.
8. Why use external CSS?
It improves maintainability and reuse.
9. Where should static folder be placed?
At project level or inside app.
10. Why is static configuration important?
It ensures proper loading of UI resources.
🔗 Navigation
👉 Next Post: Display Image using Static Tag
👉 Back to List: Django Programs (60 Questions with Solutions)
Further Reading
Introduction to Django Framework and its Features
Examples of Array Functions in PHP
Registration Form Using PDO in PHP
Inserting Information from Multiple CheckBox Selection in a Database Table in PHP
- Angular
- ASP.NET
- C
- C#
- C++
- CSS
- Dot Net Framework
- HTML
- IoT
- Java
- JavaScript
- Kotlin
- PHP
- Power Bi
- Python
- Scratch 3.0
- TypeScript
- VB.NET