Using Flask for Scientific Web Applications

Using style sheets

Web developers make heavy use of CSS style sheets to control the look and feel of web pages. Templates can utilize style sheets as any other standard HTML code. Here is a very simple example where we introduce a class name for the HTML table's column with the field name and set the foreground color of the text in this column to blue. The style sheet is called basic.css and must reside in the static subdirectory of the Flask application directory. The content of basic.css is just the line

td.name { color: blue; }

The view_css.html file using this style sheet features a link tag to the style sheet in the HTML header, and the column containing the field name has the HTML tag <td class="name"> to trigger the specification in the style sheet:

<html>
<head>
<link rel="stylesheet" href="static/basic.css" type="text/css">
</head>
<body>

<form method=post action="">
<table>
  {% for field in form %}
    <tr>
    <td class="name">{{ field.name }}</td>
    <td>{{ field(size=12) }}</td>
    <td>{{ field.label }}</td>

Just run python controller.py view_css to see that the names of the variables to set in the web page are blue.