Add HTML and CSS in Flask Web Application

In my previous post, I have shown you the basic building block of a Flask web application but that web page was not a real web page at all. That was just a line of text, not an HTML. In browser, it will display that as plain text, you cannot format/ design it any way. In this post I will show you how to use css in python flask to make your web page realistic.

To make a stylish web page you must add HTML and CSS into your web page. Flask allows us to integrate HTML and CSS files as template for your web page. So let’s see how we can do this.

Must Read:

Create folder Structure

To add template files like HTML, CSS, JavaScript in Flask application, you need to maintain a certain folder structure like below:

  1. Crate a folder for HTML files inside your root directory. I am giving name of that folder as “templateFiles
  2. Create a folder for static files like CSS, images etc. inside your root directory. I am giving name of this folder as “staticFiles

So now your root directory should looks like below (My root folder name is “flask css example“):

flask css example
├──templateFiles
├──staticFiles

Create the HTML file

So now let’s create a basic html file, which we will integrate into our Flask application as a template. Save this HTML file into “templateFiles” folder. I am giving name of this HTML file as “index.html”

index.html

<!--  how to use css in python_ flask-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--  Load CSS in Flask with html-->
    <link rel="stylesheet" href='/staticFiles/main.css' />

<!--  Load JavaScript in Flask with html-->
  <script>
    alert("Page has been loaded successfully")
  </script>

  </head>
  <body>
    <h1>Flask Template tutorial</h1>
    <p>Integrating HTML, CSS and Javascript in Flask Web Framework</p>
  </body>
</html>

In this HTML code:

  • At line 6: We are loading a CSS file for styling the HTML page (will create this file in a momoment)
  • At line 10: We are adding a javaScript code to alert when page is loaded successfully (just a basic javaScript code to explain how to add javaScript into HTML)
Also Read:  Build Digital & Analog Clock GUI with Python Tkinter

So now our folder structure should looks like below:

flask css example
├──templateFiles
│   ├──index.html
│
├──staticFiles

Creating the CSS file

Now we need to create the file “main.css” which we are reading inside HTML file (index.html). Save this main.css file into “staticFiles” folder.

main.css

body {
  background: Linen;
  margin-top: 50px;
  margin-left: 100px;
  }

h1 {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 2.5em;
  color: FireBrick;
  }

p {
  font-family: Georgia, serif;
  font-size: 1.2em;
  color: DarkSlateGray;
  }

So now our folder structure should looks like below:

flask css example
├──templateFiles
│   ├──index.html
│
├──staticFiles
    ├──main.css

Write Flask website templates code

Now that we are done with front end codes (HTML, CSS and JavaScript), we need to write our Flask back end code to render those front end files in our website.

flask_template.py

# how to use css in python_ flask
# flask render_template example

from flask import Flask, render_template

# WSGI Application
# Provide template folder name
# The default folder name should be "templates" else need to mention custom folder name
app = Flask(__name__, template_folder='templateFiles', static_folder='staticFiles')

# @app.route('/')
# def welcome():
#     return "This is the home page of Flask Application"

@app.route('/')
def index():
    return render_template('index.html')

if __name__=='__main__':
    app.run(debug = True)

Note: You need to save above code inside your root directory. So now your folder structure should look like below:

flask css example
├──templateFiles
│   ├──index.html
│
├──staticFiles
│   ├──main.css
│
├──flask_template.py

After running the above code, your web page should now look like below image:

flask css example

In this flask code, at line 9: We are mentioning flask html template folder path and flask css folder path (flask css static path). If we are not mentioning this line in Flask code, then:

  1. You had to keep your HTML files into default flask html template folder which is “templates” (instead of custom folder name “templateFiles“) inside your root directory
  2. and you had to keep your css files into default flask css static path which is “static” (instead of “staticFiles“) inside your root directory
Also Read:  How to make a Stopwatch GUI in Python Tkinter

If you are not mentioning above line of code and you try to keep your html and css files inside custom named folders (“templateFiles”, “staticFiles”)you may get error like: css not working, css not updating etc.

Conclusion

In this post I have explained:

  • How to use css in python flask with html and JavaScript.
  • Custom and default folder structure to use template files in Flask

If you have any question or suggestion regarding this post, let me know in the comment section below.

Share this

4 thoughts on “Add HTML and CSS in Flask Web Application”

  1. This page was really helpful. Thanks
    How do we call Mutiple pages like on the navigation bar
    when click on link it directs you to next page.

Leave a Comment

Your email address will not be published. Required fields are marked *