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.