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
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, JavaScript in Flask application, you need to maintain a certain folder structure like below:
- Crate a folder for HTML files inside your root directory. I am giving name of that folder as “templateFiles“
- 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)
So now our folder structure should looks like below:
flask css example
├──templateFiles
│ ├──index.html
│
├──staticFilesCreating 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.cssWrite 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.pyAfter running the above code, your web page should now look like below image:
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:
- 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
- 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.
If you have any questions or suggestions regarding this post, let me know in the comment section below.
Hi there, I’m Anindya Naskar, Data Science Engineer. I created this website to show you what I believe is the best possible way to get your start in the field of Data Science.
Why HTML file is in templates folder while CSS file in static folder ?
This is the flask framework standard. So we need to follow this.
TypeError: Flask.__init__() got an unexpected keyword argument ‘templateFiles’
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.
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.
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 !”)