Spark Databox

AWS Online Training

375$ 599.99$

Python Flask-CSS

Adding CSS to Our Website

Let’s try adding some CSS to our website by adding some style to our website. To create the templates folder for all HTML templates, we also need another folder called static for all CSS files. The static folder is used to store mostly CSS, JavaScript, and image files, alongside other essential documents as well.

To store all CSS stylesheets create a CSS folder inside the static folder.

Linking our HTML file with CSS, by using a template.css file and the existing template.html as it links all other pages together we add a few more codes to the CSS folder.

The new codes added to the parent page would also be valid for all child pages. Now, let’s update the parent page with these new lines of code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
          <meta charset="utf-8">
          <title>Flask Parent Template</title>
          <link rel="stylesheet" href="{{ url_for('static', filename='css/template.css') }}">
  </head>
<body>
     <header> 
<div class="container">
<h1 class="logo"> Flask Website</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>
 {% block content %}
 {% endblock %}
 </body>
</html>

To execute the program, run the main.py code in the command prompt and enter http://localhost:5000/about in your local browser to see the changes.

Introduction

Flask Templates

Flask Methods

Flask Cookies

Flask Session

Flask Message Flashing

Flask SQLite

Flask SQLALchemy

AWS Online Training

Python Flask-CSS

Recent Blog

Live Online Courses

Contact Us