Skip to content
Hoover Digital Media Learning Platform

Styling the Blog and Article Pages — Post Listing, Reading Typography, and Metadata

Blog content requires different design thinking than marketing pages. A hero section is designed to impress in a glance; an article is designed to be read for ten minutes. The optimal line length, spacing, and hierarchy are different — and learning to make that distinction is what separates good web designers from great ones.

Blog listing page

Section titled “Blog listing page”

The blog listing page uses the same responsive card pattern as the tours page, adapted for post cards:

/* === Blog Listing === */


.blog-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl) 0;
}


@media (min-width: 600px) {
  .blog-grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


.post-card {
  flex: 1 1 280px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}


.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}


.post-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


.post-card-body {
  flex: 1;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
}


.post-category {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
  margin-bottom: var(--space-xs);
}


.post-card-title {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}


.post-card-excerpt {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--space-md);
}


.post-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}


.read-more {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: none;
}


.read-more:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

Article hero image

Section titled “Article hero image”

A wide, cinematic image above the article content:

/* === Article Page === */


.article-hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}


@media (min-width: 601px) {
  .article-hero-image {
    aspect-ratio: 21 / 9; /* wider cinematic crop on larger screens */
  }
}

Reading typography

Section titled “Reading typography”

The single most important rule for comfortable reading on the web is line length. Research consistently points to 55–75 characters as the optimal measure. The ch unit in CSS is ideal here — 1ch equals the width of the “0” character in the current font, making it a practical character-count proxy:

.article-content {
  max-width: 68ch;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  font-size: 1.125rem;
  line-height: 1.8;
}


.article-content p {
  margin-bottom: 1.5em;
  color: var(--color-text);
}


.article-content h2 {
  font-size: 1.75rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
  border-left: 4px solid var(--color-accent);
}


.article-content h3 {
  font-size: 1.25rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}


.article-content ul,
.article-content ol {
  list-style: revert; /* restore browser bullet/number styles inside articles */
  padding-left: var(--space-lg);
  margin-bottom: 1.5em;
}


.article-content li {
  margin-bottom: var(--space-sm);
}

list-style: revert restores the browser’s default bullet and numbering styles inside the article — you zeroed them out in the global reset, but within long-form content they are needed for readability.

Pull quotes

Section titled “Pull quotes”
.article-content blockquote {
  border-left: 4px solid var(--color-accent);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  background-color: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}


.article-content blockquote p {
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 0;
}

Article metadata row

Section titled “Article metadata row”
.article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}


.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}


.article-date,
.article-category {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}


.article-category a {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: none;
}

Exercise

Section titled “Exercise”

Style the STO blog and article pages:

  1. Add all blog listing and article styles to styles.css.

  2. In blog.html, use .blog-grid and .post-card for the listing. A complete post card looks like this:

<article class="post-card">
  <img src="images/hiking-boots.jpg" alt="Three pairs of hiking boots on a wooden surface" class="post-card-image">
  <div class="post-card-body">
    <p class="post-category">Gear Guides</p>
    <h2 class="post-card-title">How to Choose the Right Hiking Boot</h2>
    <p class="post-card-excerpt">Cut, sole, waterproofing, and fit — our guide to choosing a hiking boot that will keep you comfortable on any trail.</p>
    <div class="post-card-footer">
      <span>May 15, 2026</span>
      <a href="blog-article.html" class="read-more">Read more</a>
    </div>
  </div>
</article>

Not every post card needs an image — if no relevant image is available for a post, omit the <img> entirely and the card body will still display correctly. In blog-article.html, wrap the article body text in .article-content.

  1. Open blog-article.html at 375px. The text should be readable — no more than ~68 characters per line, with comfortable 1.8 line-height.

  2. At 1200px, confirm the article content is constrained to 68ch and centered — it should not stretch the full width of the page.

  3. Add a <blockquote> to your article if you have not already, and verify the pull quote styling matches the design.

  4. Verify the metadata row wraps gracefully on mobile — flex-wrap: wrap handles it.

Recap

Section titled “Recap”
  • Blog listing and article pages share structural patterns with other STO pages but require different visual emphasis — readability over marketing impact.
  • max-width: 68ch on .article-content constrains line length for comfortable reading; ch units are the right tool because they scale with the font.
  • font-size: 1.125rem; line-height: 1.8 on the article body provides the comfortable reading rhythm that long-form content requires.
  • list-style: revert inside .article-content restores bullets and numbering that the global reset removed.
  • border-left on blockquote with a contrasting color creates a visually distinct pull quote without complex layout.

Lesson 06 completes the CSS Foundations course — styling the About and Contact pages, the site-wide footer, and celebrating what you have built.