2025-04-10 15:52:02 -06:00
<!DOCTYPE html>
< html lang = "en" data-content_root = "../" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2025-04-11 03:04:22 +00:00
< title > Static Files — Flask Documentation (3.2.x)< / title >
2025-04-10 15:52:02 -06:00
< link rel = "stylesheet" type = "text/css" href = "../_static/pygments.css?v=6625fa76" / >
< link rel = "stylesheet" type = "text/css" href = "../_static/flask.css?v=b87c8d14" / >
< script src = "../_static/documentation_options.js?v=56528222" > < / script >
< script src = "../_static/doctools.js?v=9bcbadda" > < / script >
< script src = "../_static/sphinx_highlight.js?v=dc90522c" > < / script >
< script data-project = "flask" data-version = "3.2.x" src = "../_static/describe_version.js?v=fa7f30d0" > < / script >
< link rel = "icon" href = "../_static/shortcut-icon.png" / >
< link rel = "index" title = "Index" href = "../genindex.html" / >
< link rel = "search" title = "Search" href = "../search.html" / >
2025-04-11 03:04:22 +00:00
< link rel = "next" title = "Blog Blueprint" href = "blog.html" / >
< link rel = "prev" title = "Templates" href = "templates.html" / >
2025-04-10 15:52:02 -06:00
< / head > < body >
< div class = "related" role = "navigation" aria-label = "Related" >
< h3 > Navigation< / h3 >
< ul >
< li class = "right" style = "margin-right: 10px" >
< a href = "../genindex.html" title = "General Index"
accesskey="I">index< / a > < / li >
< li class = "right" >
< a href = "../py-modindex.html" title = "Python Module Index"
>modules< / a > |< / li >
< li class = "right" >
2025-04-11 03:04:22 +00:00
< a href = "blog.html" title = "Blog Blueprint"
2025-04-10 15:52:02 -06:00
accesskey="N">next< / a > |< / li >
< li class = "right" >
2025-04-11 03:04:22 +00:00
< a href = "templates.html" title = "Templates"
2025-04-10 15:52:02 -06:00
accesskey="P">previous< / a > |< / li >
< li class = "nav-item nav-item-0" > < a href = "../index.html" > Flask Documentation (3.2.x)< / a > » < / li >
< li class = "nav-item nav-item-1" > < a href = "index.html" accesskey = "U" > Tutorial< / a > » < / li >
2025-04-11 03:04:22 +00:00
< li class = "nav-item nav-item-this" > < a href = "" > Static Files< / a > < / li >
2025-04-10 15:52:02 -06:00
< / ul >
2025-04-11 03:04:22 +00:00
< / div >
2025-04-10 15:52:02 -06:00
< div class = "document" >
< div class = "documentwrapper" >
< div class = "bodywrapper" >
< div class = "body" role = "main" >
2025-04-11 03:04:22 +00:00
< section id = "static-files" >
< h1 > Static Files< a class = "headerlink" href = "#static-files" title = "Link to this heading" > ¶< / a > < / h1 >
< p > The authentication views and templates work, but they look very plain
right now. Some < a class = "reference external" href = "https://developer.mozilla.org/docs/Web/CSS" > CSS< / a > can be added to add style to the HTML layout you
constructed. The style won’ ’ < em > static< / em > file rather than
a template.< / p >
< p > Flask automatically adds a < code class = "docutils literal notranslate" > < span class = "pre" > static< / span > < / code > view that takes a path relative
to the < code class = "docutils literal notranslate" > < span class = "pre" > flaskr/static< / span > < / code > directory and serves it. The < code class = "docutils literal notranslate" > < span class = "pre" > base.html< / span > < / code >
template already has a link to the < code class = "docutils literal notranslate" > < span class = "pre" > style.css< / span > < / code > file:< / p >
< div class = "highlight-html+jinja notranslate" > < div class = "highlight" > < pre > < span > < / span > < span class = "cp" > {{< / span > < span class = "nv" > url_for< / span > < span class = "o" > (< / span > < span class = "s1" > ' static' < / span > < span class = "o" > ,< / span > < span class = "nv" > filename< / span > < span class = "o" > =< / span > < span class = "s1" > ' style.css' < / span > < span class = "o" > )< / span > < span class = "cp" > }}< / span >
2025-04-10 15:52:02 -06:00
< / pre > < / div >
< / div >
2025-04-11 03:04:22 +00:00
< p > Besides CSS, other types of static files might be files with JavaScript
functions, or a logo image. They are all placed under the
< code class = "docutils literal notranslate" > < span class = "pre" > flaskr/static< / span > < / code > directory and referenced with
< code class = "docutils literal notranslate" > < span class = "pre" > url_for('static',< / span > < span class = "pre" > filename='...')< / span > < / code > .< / p >
< p > This tutorial isn’
the following into the < code class = "docutils literal notranslate" > < span class = "pre" > flaskr/static/style.css< / span > < / code > file:< / p >
< div class = "literal-block-wrapper docutils container" id = "id1" >
< div class = "code-block-caption" > < span class = "caption-text" > < code class = "docutils literal notranslate" > < span class = "pre" > flaskr/static/style.css< / span > < / code > < / span > < a class = "headerlink" href = "#id1" title = "Link to this code" > ¶< / a > < / div >
< div class = "highlight-css notranslate" > < div class = "highlight" > < pre > < span > < / span > < span class = "nt" > html< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > font-family< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > sans-serif< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > background< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mh" > #eee< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > padding< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > rem< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "nt" > body< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > max-width< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 960< / span > < span class = "kt" > px< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > margin< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "w" > < / span > < span class = "kc" > auto< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > background< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > white< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "nt" > h1< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > font-family< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > serif< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > color< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mh" > #377ba8< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > margin< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > rem< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "nt" > a< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > color< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mh" > #377ba8< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "nt" > hr< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > border< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > none< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > border-top< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > px< / span > < span class = "w" > < / span > < span class = "kc" > solid< / span > < span class = "w" > < / span > < span class = "kc" > lightgray< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "nt" > nav< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > background< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > lightgray< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > display< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > flex< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > align-items< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > center< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > padding< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "w" > < / span > < span class = "mf" > 0.5< / span > < span class = "kt" > rem< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "nt" > nav< / span > < span class = "w" > < / span > < span class = "nt" > h1< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > flex< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > auto< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > margin< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "nt" > nav< / span > < span class = "w" > < / span > < span class = "nt" > h1< / span > < span class = "w" > < / span > < span class = "nt" > a< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > text-decoration< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > none< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > padding< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mf" > 0.25< / span > < span class = "kt" > rem< / span > < span class = "w" > < / span > < span class = "mf" > 0.5< / span > < span class = "kt" > rem< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "nt" > nav< / span > < span class = "w" > < / span > < span class = "nt" > ul< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > display< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > flex< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > list-style< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > none< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > margin< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > padding< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "nt" > nav< / span > < span class = "w" > < / span > < span class = "nt" > ul< / span > < span class = "w" > < / span > < span class = "nt" > li< / span > < span class = "w" > < / span > < span class = "nt" > a< / span > < span class = "o" > ,< / span > < span class = "w" > < / span > < span class = "nt" > nav< / span > < span class = "w" > < / span > < span class = "nt" > ul< / span > < span class = "w" > < / span > < span class = "nt" > li< / span > < span class = "w" > < / span > < span class = "nt" > span< / span > < span class = "o" > ,< / span > < span class = "w" > < / span > < span class = "nt" > header< / span > < span class = "w" > < / span > < span class = "p" > .< / span > < span class = "nc" > action< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > display< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > block< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > padding< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mf" > 0.5< / span > < span class = "kt" > rem< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > content< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > padding< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > rem< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > rem< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > content< / span > < span class = "w" > < / span > < span class = "o" > > < / span > < span class = "w" > < / span > < span class = "nt" > header< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > border-bottom< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > px< / span > < span class = "w" > < / span > < span class = "kc" > solid< / span > < span class = "w" > < / span > < span class = "kc" > lightgray< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > display< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > flex< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > align-items< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > flex-end< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > content< / span > < span class = "w" > < / span > < span class = "o" > > < / span > < span class = "w" > < / span > < span class = "nt" > header< / span > < span class = "w" > < / span > < span class = "nt" > h1< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > flex< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > auto< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > margin< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > rem< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "w" > < / span > < span class = "mf" > 0.25< / span > < span class = "kt" > rem< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > flash< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > margin< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > em< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > padding< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > em< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > background< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mh" > #cae6f6< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > border< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > px< / span > < span class = "w" > < / span > < span class = "kc" > solid< / span > < span class = "w" > < / span > < span class = "mh" > #377ba8< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > post< / span > < span class = "w" > < / span > < span class = "o" > > < / span > < span class = "w" > < / span > < span class = "nt" > header< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > display< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > flex< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > align-items< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > flex-end< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > font-size< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mf" > 0.85< / span > < span class = "kt" > em< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > post< / span > < span class = "w" > < / span > < span class = "o" > > < / span > < span class = "w" > < / span > < span class = "nt" > header< / span > < span class = "w" > < / span > < span class = "o" > > < / span > < span class = "w" > < / span > < span class = "nt" > div< / span > < span class = "p" > :< / span > < span class = "nd" > first-of-type< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > flex< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > auto< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > post< / span > < span class = "w" > < / span > < span class = "o" > > < / span > < span class = "w" > < / span > < span class = "nt" > header< / span > < span class = "w" > < / span > < span class = "nt" > h1< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > font-size< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mf" > 1.5< / span > < span class = "kt" > em< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > margin-bottom< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > post< / span > < span class = "w" > < / span > < span class = "p" > .< / span > < span class = "nc" > about< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > color< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > slategray< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > font-style< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > italic< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > post< / span > < span class = "w" > < / span > < span class = "p" > .< / span > < span class = "nc" > body< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > white-space< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > pre-line< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > content< / span > < span class = "p" > :< / span > < span class = "nd" > last-child< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > margin-bottom< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > content< / span > < span class = "w" > < / span > < span class = "nt" > form< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > margin< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > em< / span > < span class = "w" > < / span > < span class = "mi" > 0< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > display< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > flex< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > flex-direction< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > column< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > content< / span > < span class = "w" > < / span > < span class = "nt" > label< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > font-weight< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > bold< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > margin-bottom< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mf" > 0.5< / span > < span class = "kt" > em< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > content< / span > < span class = "w" > < / span > < span class = "nt" > input< / span > < span class = "o" > ,< / span > < span class = "w" > < / span > < span class = "p" > .< / span > < span class = "nc" > content< / span > < span class = "w" > < / span > < span class = "nt" > textarea< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > margin-bottom< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 1< / span > < span class = "kt" > em< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "p" > .< / span > < span class = "nc" > content< / span > < span class = "w" > < / span > < span class = "nt" > textarea< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > min-height< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 12< / span > < span class = "kt" > em< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > resize< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > vertical< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "nt" > input< / span > < span class = "p" > .< / span > < span class = "nc" > danger< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > color< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mh" > #cc2f2e< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
< span class = "nt" > input< / span > < span class = "o" > [< / span > < span class = "nt" > type< / span > < span class = "o" > =< / span > < span class = "nt" > submit< / span > < span class = "o" > ]< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span > < span class = "k" > align-self< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "kc" > start< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "k" > min-width< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "mi" > 10< / span > < span class = "kt" > em< / span > < span class = "p" > ;< / span > < span class = "w" > < / span > < span class = "p" > }< / span >
2025-04-10 15:52:02 -06:00
< / pre > < / div >
< / div >
< / div >
2025-04-11 03:04:22 +00:00
< p > You can find a less compact version of < code class = "docutils literal notranslate" > < span class = "pre" > style.css< / span > < / code > in the
< a class = "reference external" href = "https://github.com/pallets/flask/tree/main/examples/tutorial/flaskr/static/style.css" > example code< / a > .< / p >
< p > Go to < a class = "reference external" href = "http://127.0.0.1:5000/auth/login" > http://127.0.0.1:5000/auth/login< / a > and the page should look like the
screenshot below.< / p >
< img alt = "screenshot of login page" class = "screenshot align-center" src = "../_images/flaskr_login.png" / >
< p > You can read more about CSS from < a class = "reference external" href = "https://developer.mozilla.org/docs/Web/CSS" > Mozilla’ < / a > . If
you change a static file, refresh the browser page. If the change
doesn’ ’ < / p >
< p > Continue to < a class = "reference internal" href = "blog.html" > < span class = "doc" > Blog Blueprint< / span > < / a > .< / p >
2025-04-10 15:52:02 -06:00
< / section >
< div class = "clearer" > < / div >
< / div >
< / div >
< / div >
< span id = "sidebar-top" > < / span >
< div class = "sphinxsidebar" role = "navigation" aria-label = "Main" >
< div class = "sphinxsidebarwrapper" >
2025-04-11 03:04:22 +00:00
2025-04-10 15:52:02 -06:00
< p class = "logo" > < a href = "../index.html" >
< img class = "logo" src = "../_static/flask-vertical.png" alt = "Logo of Flask" / >
< / a > < / p >
< h3 > Navigation< / h3 >
< ul >
< li > < a href = "../index.html" > Overview< / a >
< ul >
< li > < a href = "index.html" > Tutorial< / a >
< ul >
2025-04-11 03:04:22 +00:00
< li > Previous: < a href = "templates.html" title = "previous chapter" > Templates< / a >
< li > Next: < a href = "blog.html" title = "next chapter" > Blog Blueprint< / a > < / ul >
2025-04-10 15:52:02 -06:00
< / li >
< / ul >
< / li >
< / ul >
< search id = "searchbox" style = "display: none" role = "search" >
< h3 id = "searchlabel" > Quick search< / h3 >
< div class = "searchformwrapper" >
< form class = "search" action = "../search.html" method = "get" >
< input type = "text" name = "q" aria-labelledby = "searchlabel" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" / >
< input type = "submit" value = "Go" / >
< / form >
< / div >
< / search >
< script > document . getElementById ( 'searchbox' ) . style . display = "block" < / script > < div id = "ethical-ad-placement" > < / div >
< / div >
< / div >
< div class = "clearer" > < / div >
< / div >
< div class = "footer" role = "contentinfo" >
© Copyright 2010 Pallets.
Created using < a href = "https://www.sphinx-doc.org/" > Sphinx< / a > 8.1.3.
< / div >
< / body >
2025-04-11 03:04:22 +00:00
< / html >
