Add HTML and CSS in Flask Web Application

In my previous post, I showed 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 the browser, it will display that as plain text, you cannot format or design it anyway. 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 templates for your web page. So let’s see how we can do this.

Table of contents

Must Read: Beginners guide to Flask Python Web App framework

Create folder Structure

Before we begin I hope you have basic understanding of HTML, CSS, and JavaScript. If you don’t then I will recommend you to take this Udemy course first: Web Development | HTML | CSS | JavaScript | jQuery | NodeJS.

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

  1. Create a folder for HTML files inside your root directory. I am giving the name of that folder as “templateFiles“
  2. Create a folder for static files like CSS, images, etc. inside your root directory. I am giving the 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“

Also Read:  How to Create Desktop Application Using Python

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 moment)
  • At line 10: We are adding a JavaScript code to alert when the page is loaded successfully (just a basic JavaScript code to explain how to add JavaScript into HTML)

So now our folder structure should look 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 the 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 look 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 (in Python) 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:

Also Read:  Build Question Answering API with Flask and Python
flask css example

In this Python 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

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

Finally, if you want to make your career in web development with Flask and Python then, I will recommend you to take this Udemy course: The Ultimate Flask Course. It has everything a Flask web app developer should know.

This is it for this article. If you have any questions or suggestions regarding this post, let me know in the comment section below.

Similar Read:

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

  3. 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.

    Reply

  4. How to get the java script alert message when the validation of the form data with the database got false then i have to get the alert message of Invalid usename/password then how to write the code.

    Reply

  5. I’m not an expert, and I just began html in college, but my teacher give us a lesson about JavaScript and we learnt how to make an alert with JavaScript, this is an example of my teacher, it works on JSFiddle (a application online which mix HTML, JavaScript and CSS):
    The HTML code is:

    And the JavaScript is just:

    alert(“JavaScript works !”)

    Reply

Leave a comment