Static Files

The authentication views and templates work, but they look very plainright now. Some CSS can be added to add style to the HTML layout youconstructed. The style won’t change, so it’s a static file rather thana template.

Flask automatically adds a static view that takes a path relativeto the flaskr/static directory and serves it. The base.htmltemplate already has a link to the style.css file:

  1. {{ 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 the flaskr/static/style.css file:

flaskr/static/style.css

  1. html { font-family: sans-serif; background: #eee; padding: 1rem; }
  2. body { max-width: 960px; margin: 0 auto; background: white; }
  3. h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
  4. a { color: #377ba8; }
  5. hr { border: none; border-top: 1px solid lightgray; }
  6. nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
  7. nav h1 { flex: auto; margin: 0; }
  8. nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
  9. nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
  10. nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
  11. .content { padding: 0 1rem 1rem; }
  12. .content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
  13. .content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
  14. .flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
  15. .post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
  16. .post > header > div:first-of-type { flex: auto; }
  17. .post > header h1 { font-size: 1.5em; margin-bottom: 0; }
  18. .post .about { color: slategray; font-style: italic; }
  19. .post .body { white-space: pre-line; }
  20. .content:last-child { margin-bottom: 0; }
  21. .content form { margin: 1em 0; display: flex; flex-direction: column; }
  22. .content label { font-weight: bold; margin-bottom: 0.5em; }
  23. .content input, .content textarea { margin-bottom: 1em; }
  24. .content textarea { min-height: 12em; resize: vertical; }
  25. input.danger { color: #cc2f2e; }
  26. input[type=submit] { align-self: start; min-width: 10em; }

You can find a less compact version of style.css in theexample code.

Go to http://127.0.0.1:5000/auth/login and the page should look like thescreenshot below.screenshot of login pageYou can read more about CSS from Mozilla’s documentation. Ifyou change a static file, refresh the browser page. If the changedoesn’t show up, try clearing your browser’s cache.

Continue to Blog Blueprint.