Adding CSS styling to your website 13


So far, our website consists of a Python script, and three HTML documents. The Python script handles the communication between the web server and the web client (i.e. browser) while the HTML documents are responsible for the structure of the page content.

Now we need to add some style formatting to the HTML structure using CSS (Cascading Style Sheets). That is done by creating a CSS file and connecting it to our HTML files. CSS is a style language that likewise HTML it is also very easy to learn. Python is much harder to learn than CSS,. So a rule of thumb is if you know Python, learning CSS should be a breeze.

At the end of this lesson, your website will look like this:

Nice looking website with flask

Remember that HTML template files HTML go inside the templates folder. CSS stylesheets are considered static files. There is no interaction with their code, like there is with HTML templates. Therefore, flask has reserved a separate folder where you should put static files such as CSS, Javascript, images or other files. That folder should be created by you and should be named staticIt’s also good practice to create another folder inside static and name it css.

Now, create an empty file inside the css and name the file something like main.css. The directory tree should look like this now:

flask directory tree with css

Then, put this code inside the CSS file:

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #444;
}

/*
 * Formatting the header area
 */

header {
  background-color: #DFB887;
  height: 35px;
  width: 100%;
  opacity: .9;
  margin-bottom: 10px;
}

header h1.logo {
  margin: 0;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  float: left;
}

header h1.logo:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Centering the body content
 */

.container {
  width: 1200px;
  margin: 0 auto;
}

div.home {
  padding: 10px 0 30px 0;
  background-color: #E6E6FA;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

div.about {
  padding: 10px 0 30px 0;
  background-color: #E6E6FA;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

h2 {
  font-size: 3em;
  margin-top: 40px;
  text-align: center;
  letter-spacing: -2px;
}

h3 {
  font-size: 1.7em;
  font-weight: 100;
  margin-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  color: #999;
}

.menu {
  float: right;
  margin-top: 8px;
}

.menu li {
  display: inline;
}

.menu li + li {
  margin-left: 35px;
}

.menu li a {
  color: #444;
  text-decoration: none;
}

I assume the CSS file is quite self-explanatory. What the code is basically doing is referring to the HTML tags and div class names and applying fonts, colors, text size, padding, margins and background colors to those HTML elements.

Alright, we have a CSS file, but our HTML documents still don’t know how to link to it. The idea is we should link each page to the CSS, but because our layout.html code is at every page, we can insert the linking code to that. So, open your layout.html page and add a head section so that the code looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Flask app</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
  </head>
  <body>
    <header>
      <div class="container">
        <h1 class="logo">Ardit's web app</h1>
        <strong><nav>
          <ul class="menu">
            <li><a href="{{ url_for('home') }}">Home</a></li>
            <li><a href="{{ url_for('about') }}">About</a></li>
          </ul>
        </nav></strong>
      </div>
    </header>
    <div class="container">
      {% block content %}
      {% endblock %}
    </div>
  </body>
</html>

As you see, we added a title and link tags to inside head tags. Inside the link tag we declared we are relating to a stylesheet document and then we specified the path to that style sheet.

Navigating to localhost:5000 now should display the website you saw in the screenshot further above.

You can now add more content to it and tweak the HTML files by adding more divs if you want more sections in your webpages.

But, what does a website serve for if it’s vegetating in your localhost?

It’s completely useless if no one sees it.

No worries though, we will fix that right away by deploying the website in the Heroku cloud so that anyone can visit it through a public URL.

Let’s move on to the next lesson.



Leave a comment

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

13 thoughts on “Adding CSS styling to your website

  • Vitaly

    Great tutorial, but i can’t get a right result. I ‘ve checked my code so many times, but css settings still don’t work.
    I see changes only in font, but background and position of elements is the same as in preceding chapter. What is the reason could be for that?

  • Dean

    Hi Ardit!
    I have a problem with the first flask code as it says ” import error: no flask module found ”
    I have installed flask and pasted the code into IDLE IDE as you said. (worth mentioning:Python is also added to the environment path. I also have miniconda installed.)

    • David

      You have to make sure the IDE you’re using is directed to the correct path where python.exe is located. I use notepad++ and downloaded anaconda 3. I had python 3.5.2 preinstalled before anaconda and because anaconda has its own python, I had to make sure all the paths in every editor I use for Python (notepad++) is directed to the python version that comes with anaconda 3. So look for the python.exe file in your miniconda folder and uninstall any free standing python.

      What I did was as follows:

      uninstall everything, notpad++, anaconda and all traces of python. Then I reinstalled anaconda 3, followed by notepad++ and changed the path name to the anaconda 3 folder and then installed flask using pip.. Viola!

    • Florian

      Had similar symptom, turned out to be a case sensitive typo (autocorrect?) in the first line. Make sure the first ‘flask’ is lowercase, the second ‘Flask’ is uppercase:

      from flask import Flask

      • Margery

        בשנה שעברה הצטרפתי לאופק חדש ודורגתי 2+ וכמו כן סיימתי בשנה שעברה שנה א בהתמקצעות במתמטיקה בהיקף של 140 שעות.השנה אני ממשיכה בהתמקצעות אך לא עודכנה לי ח¨—“×ÂÃגה(Ԟעבר מדרגה 2 ל3 היא שנתיים ו-120 שעות) אם דורגתי 2+ הייתי אמורה להתקדם!? לא?!תודה מראש

  • ashomar

    it work fine for me.
    just little issue:
    1. the container class width should percentage not fixed, like this:
    .container {
    width: 90%;
    margin: 0 auto;
    }

    2. the div.home and div.about padding it should give space between text and border, like this:
    div.home {
    padding: 10px 10px 30px 10px;

    thanks

    • James B

      give your static folder a subfolder called css and place the stylesheet in that folder. Also make sure you are importing in the css definitions in your html with

      static/
      css/
      style.css

      • James B

        give your static folder a subfolder called css and place the stylesheet in that folder. Also make sure you are importing in the css definitions in your html with

        ../static/css/style.css

  • Roberto_Thom

    Everything worked great! I am using a Macbook pro and Sublime as my text editor. I installed everything in a virtual env using Terminal.
    I even created a images folder inside static folder what allowed me to put a photo in the home page. I just used the same sintaxe you did when loading the css file only changing the path.
    I would like to now if is easy to have a Admin panel and a Database to work with. I was thinking another page with some photos that I could replace and upload via that Admin panel.