Static Files

Our pages have already been styled using Bootstrap however to make greater modifications we will need to add our own CSS. This can also be extended into serving images or JavaScript using the same method.

By default Flask will treat any files in the static/ directory as static files which allows us to serve them directly. We can create a static/ directory in our project root and add a style.css file to it.

flaskapp/static/style.css

.blog-header-logo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.25rem;
}

.blog-header-logo:hover {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Georgia, "Times New Roman", serif;
}

.flex-auto {
  flex: 0 0 auto;
}

.h-250 {
  height: 250px;
}

@media (min-width: 768px) {
  .h-md-250 {
    height: 250px;
  }
}

/* Pagination */
.blog-pagination {
  margin-bottom: 4rem;
}

/*
 * Blog posts
 */
.blog-post {
  margin-bottom: 4rem;
}

.blog-post-meta {
  margin-bottom: 1.25rem;
  color: #727272;
}

.comment-created {
  font-size: 0.75rem;
  color: #828282;
  margin-bottom: 0rem;
}

With our reference of url_for("static", filename="style.css") in our base.html it will now autmatically load this CSS across our site.