Create a CSS stylesheet

Now that you have a static/css directory, create a new file called theme.css and store it in the static/css you just made. This CSS file will contain the code for the theme that will consistently be used across the web application. You can use your own code or copy the following code to get started with a basic theme.

Create a base template

Now we will create a base template file that will contain the structure and layout of pages and will be used across the web application.

Tip: Installing a Django VS Code extension will help VS Code recognise the Django syntax used throughout template files.

In your app’s templates folder, create a new HTML file called base.html . In this HTML file, add the HTML code that serve as the foundation for pages across the application.

At the top of the HTML file, make sure it has the following line of code:

{% load static %}

Adding this line of code to the top of the HTML file ensures that our template loads the static extension so we can load static files (eg. images, CSS stylesheets, etc) for the web page. Now, any static files that we need to reference in our HTML code can be referenced using Django’s static tag. You’ll see them throughout the example template code further below, for example, here is a reference to the theme.css file using the static tag:

{% static 'css/theme.css' %}

Django tags start with {% and end with %} characters.

Throughout the base template, we will also create different blocks - these are where child pages will be allowed to put in information. For each block, we will specify a default value. For example, we will create a block for the page’s title. The default value will be “TravelGuide” but this can be changed on each child page that inherits from the base template. Here’s an example:

<title>

{% block title %}

TravelGuide

{% endblock title %}

<title>

You can create your own base template using HTML code, or use the following example HTML code to get started:

Using a base template

Now let’s try out using the base template we just made. We will start out by modifying the index.html template so that it inherits the layout, structure and theme from the base template. In order to use a base template, you add the extends keywords followed by the name of the base template file within the {% and %} tags at the top of the HTML code in a template file. For example:

{% extends 'base.html' %}

Now we can just refer to the names of the blocks we added to the base template. If we want to override the default values we specified in the blocks, then we can just specify the different content we want in each block. In the example below, the page title will be “TravelGuide - Home” on the home page (index.html), but if we completely remove the title block code from the index.html template then the default title from the base template will be used instead.

Replace your existing code in your index.html template file with the next code below to try it out.

Save your code and enter the command you use to run the server (eg. python3 manage.py runserver ) in the VS Code terminal to start the server. Load the home page for your website in your browser. The base template and the CSS stylesheet should now be used on the home page.

Now open the about.html file and modify its code so it also inherits from the base template. Here is some example code you can use:

Reload the About page in your browser and you should now notice it is inheriting the layout from the base template and the theme from the CSS stylesheet.

Updating URLs

Right now, the URLs (links) are hardcoded in the HTML code. However, we have routes set up in our Django project. There’s also a chance that routes (and therefore URLs) could change in a project over time. So, instead of hardcoding the URLs for our menu (navbar) in the base template (and other template files), we can use the URL function and refer to the names of the routes we have set up in our urls.py file. This can be achieved using code like this:

<a href="{% url 'about' %}">About</a>

In the example above, a link on a page will direct the user to the About page. However, rather than the URL being hardcoded in, it is referring to the about route that is specified in the urls.py file.

Open up the base.html base template file again and modify it so it now has the following code:

So that’s how base templates work!

In the next lesson, we will look at how to display dynamic data in Django function views.

Next lesson: Displaying dynamic data in Django views