Beautify Flask Web App using CSS, HTML

Before we add css, html to our code, check out my short post on creating a simple app using Flask

Now that we are able to create a web app using Flask, it looks dull with just some text. In this article, I will briefly explain how to add styling to the web page so that it looks like a nicer site!

I will be using the setup for the Flask tutorial as a template so that we can follow along.

Here is the source code again:

from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
   return 'Hello World'
if __name__ == '__main__':
   app.run()

As a refresher, Flask needs to be installed in your machine.

def hello_word() represents the method that is being called when the index page is served. As a practice, since this is where the index page is being called, we will like to have this method defined as index() instead of hello_world() . Right now, it has only one method, but as the app grows, it will be easier to understand where the method is being called from.

Let’s change our method to index()

from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
   return 'Hello World'
if __name__ == '__main__':
   app.run()

If you look at the index method, it returns ‘Hello World’. Not very interesting, right? If you look at other sites, for example like yelp.com or airbnb.com, it looks appealing with layouts and styling integrated into the page. However by having a return in the index method, you are not able to do that.

Rendering Templates

Flask has a method, render_template . All you have to do is call that method.

from flask import Flask, render_template

Flask will look for files in the templates folder. To be explicit, you can also call this:

app = Flask(__name__, template_folder='templates')

This templates folder has to be in the same directory level as app.py

To create a folder:

In terminal: mkdir templates . Make sure you are in the project directory.

In Sublime Text: Right click on the project folder and add a new folder. Make sure the folder is in the same level as the app.py file.

app.py
/templates

In the app.py, instead of returning a string, you can call this:

return render_template('index.html') . Make sure you have a file index.html under the templates folder.

To create a file,

In terminal:

cd templates
touch index.html

In Sublime Text: Right click on the templates folder and click create new file. Save it as index.html

This will get the template under templates/index.html and return whatever content that is there.

In templates/index.html

Hello, I am in the template folder!

Let’s do a quick example.

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
   return render_template('index.html')
if __name__ == '__main__':
   app.run()

Restart the app and refresh the link: http://127.0.0.1:5000/. You will see the changes now! Instead of having it return on app.py, It calls the template and renders the template!

Photo by Maxwell Nelson on Unsplash

Adding CSS, HTML

Cascading Style Sheets (CSS) is for adding styles (fonts, colors etc) to a webpage. Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.

A webpage consists of HTML elements, consisting of HTML tags.

Some common tags include:

• <div> Div Tag
• <span> Span Tag
• <li> List Tag
• <img> Image Tag
• and many more…

Let’s create a simple HTML page. We have create a html file with index.html. Let’s proceed from there.

Suppose we have a grocery list and we want to display the list onto the page.

<h1>My Grocery List</h1>
<ol>
  <li>Eggs</li>
  <li>Milk</li>
  <li>Pasta</li>
  <li>Chicken</li>
</ol>

<h1> represents a h1 tag. You can have headline tags e.g. <h2></h2>, <h3></h3> etc . You will notice that each tag will be represented with a closing div tag represented by </ > . This signifies that the content in between the tag is represented by that particular tag. <ol></ol> represents an ordered list, <li></li> between the <ol> tags signify that the list will be ordered, numbered. If you will like it to be unordered, e.g. with bullet points then use <ul></ul> instead. For a list of html tags, refer to this link.

Restart the app and you have created your first html page!

Let’s add some styling to this page.

<div class='wrapper' style='width:300px; margin: auto;'>
  <h1 style='margin-top: 30px;'>My Grocery List</h1>
  <ol style='padding: 0'>
    <li style='padding: 10px; font-size: 20px; color: red;'>Eggs</li>
    <li style='padding: 10px; font-size: 20px; color: red;'>Milk</li>
    <li style='padding: 10px; font-size: 20px; color: red;'>Pasta</li>
    <li style='padding: 10px; font-size: 20px; color: red;'>Chicken</li>
  </ol>
</div>

There are a few ways to add css. You can click on this link to see the different ways of doing so. In this example, I am using Inline CSS. This is denoted by having a style in the tag. Each style is followed by a quote and the rules for that particular div.

padding: 10px; font-size: 20px are rules. This represent the tag having a padding of 10px and font size of 20px.

For more details on how CSS work, follow this link.

There you have it, you have created a simple app with html and css!