Add CSS and Static Files in Django
By Aditi DeoDjango is a framework based on Python that uses the model-view-template architecture to build web apps. In this tutorial, we will learn how to add static files such as images, javascript, etc along with CSS files in our dynamic websites using Django.
Steps to add CSS files in Django
Let the name of the app be ‘project’ which basically holds the menu of the restaurant that our website represents. Initially, when we run our Django server, some food items like Pizza, Pasta would be displayed to the users without any styling.
The main.html File in this scenario is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My website</title>
</head>
<body>
<h1>Welcome to my restaurant</h1>
<p>Check out the menu:</p>
<ul>
<li>
Pizza
</li>
<li>
Pasta
</li>
</ul>
</body>
</html>Output: After running python manage.py runserver
Now to add styling to this page we will create a CSS file that will contain the following changes:
- Background color to Yellow
- H1 header tags color to Red
- Paragraph tags color to Blue
- List items color to Pink
To add CSS files to the following web page follow the given steps:
- Create a static folder in the root directory of your project.
- Add all CSS files, images, or JavaScript files to this static folder.
Django understands this pre-defined folder for keeping all static files of the project. We will create three separate folders for images, CSS, and js files. In our project, we will add the main.css file to the styles folder of the static folder. The code for main.css is:
body {
background-color: #fefbd8;
}
h1{
color: red;
}
p{
color: blue;
size: 20px;
}
li{
color: pink;
}3. Next we will add the following code to our main.html to load static files into HTML: We use Jinja templating to write python expressions in HTML files.
{% load static %}4. Next we link the CSS stylesheet with our main.html
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{% static 'styles/main.css' %}">
<title>My website</title>
</head>5. Finally we add the static folder to the base directory by writing the following code in settings.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]Output: After running python manage.py runserver
Steps to add images in Django
In order to add images to our website, we follow the same steps 1,2, and 3 as shown above. Suppose we want to add images for our food items such as Pizza or Pasta. Then initially we add those images to our static folder.
Then we add the following code to our main.html.
<p>Check out the menu:</p>
<ul>
<li>
Pizza
</li>
<img src="{%static 'images/pizza.jpg' %}" style="width:150px; height:150px" >
<li>
Pasta
</li>
<img src="{%static 'images/pasta.jpg' %}" style="width:150px; height:150px" >
</ul>Next, we shall include the following code in settings.py for the server to know where the images are located inside the static folder:
MEDIA_URL='/images/'
Output: After running python manage.py runserver
Steps to add JavaScript files in Django
In order to add javascript files to our website, we follow the same steps 1,2, and 3 as shown above. Suppose we want to alert the user with a hello message whenever he visits our website. Then initially we add the following hello.js file to our static folder.
alert("Hello, Welcome to My food Website");Then we add the following code to our main.html.
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{% static 'styles/main.css' %}">
<script src="{% static 'js/hello.js' %}" type="text/javascript"></script>
<title>My website</title>
</head>Output: After running python manage.py runserver
Thus we have reached the end of this tutorial on how to add CSS and static files in Django. To learn more about forms in Django click on the following link:Django – Submit Form data with Post Method
Leave a Reply