Static Files¶
The authentication views and templates work, but they look very plainright now. SomeCSS can be added to add style to the HTML layout youconstructed. The style won’t change, so it’s astatic file rather thana template.
Flask automatically adds astatic view that takes a path relativeto theflaskr/static directory and serves it. Thebase.htmltemplate already has a link to thestyle.css file:
{{url_for('static',filename='style.css')}}
Besides CSS, other types of static files might be files with JavaScriptfunctions, or a logo image. They are all placed under theflaskr/static directory and referenced withurl_for('static',filename='...').
This tutorial isn’t focused on how to write CSS, so you can just copythe following into theflaskr/static/style.css file:
flaskr/static/style.css¶html{font-family:sans-serif;background:#eee;padding:1rem;}body{max-width:960px;margin:0auto;background:white;}h1{font-family:serif;color:#377ba8;margin:1rem0;}a{color:#377ba8;}hr{border:none;border-top:1pxsolidlightgray;}nav{background:lightgray;display:flex;align-items:center;padding:00.5rem;}navh1{flex:auto;margin:0;}navh1a{text-decoration:none;padding:0.25rem0.5rem;}navul{display:flex;list-style:none;margin:0;padding:0;}navullia,navullispan,header.action{display:block;padding:0.5rem;}.content{padding:01rem1rem;}.content>header{border-bottom:1pxsolidlightgray;display:flex;align-items:flex-end;}.content>headerh1{flex:auto;margin:1rem00.25rem0;}.flash{margin:1em0;padding:1em;background:#cae6f6;border:1pxsolid#377ba8;}.post>header{display:flex;align-items:flex-end;font-size:0.85em;}.post>header>div:first-of-type{flex:auto;}.post>headerh1{font-size:1.5em;margin-bottom:0;}.post.about{color:slategray;font-style:italic;}.post.body{white-space:pre-line;}.content:last-child{margin-bottom:0;}.contentform{margin:1em0;display:flex;flex-direction:column;}.contentlabel{font-weight:bold;margin-bottom:0.5em;}.contentinput,.contenttextarea{margin-bottom:1em;}.contenttextarea{min-height:12em;resize:vertical;}input.danger{color:#cc2f2e;}input[type=submit]{align-self:start;min-width:10em;}
You can find a less compact version ofstyle.css in theexample code.
Go tohttp://127.0.0.1:5000/auth/login and the page should look like thescreenshot below.
You can read more about CSS fromMozilla’s documentation. Ifyou change a static file, refresh the browser page. If the changedoesn’t show up, try clearing your browser’s cache.
Continue toBlog Blueprint.
