O'Reilly logo

Responsive Web Design by Example : Beginner's Guide - Second Edition by Thoriq Firdaus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – enhancing the content section appearance with CSS

Perform the following steps to style the blog content:

  1. Add whitespace on all sides of the content section with padding and margin, as follows
    .blog-content {
      padding: 15px;
      margin-bottom: 30px;
    } 
  2. Separate each blog post with some whitespace and borderline, as follows:
    .post {
      margin-bottom: 60px;
      padding-bottom: 60px;
      border-bottom: 1px solid #ddd;
    }
  3. Align the title to the center, adjust the title font size a little, and change the color with the following style rules:
    .post-title {
      font-size: 36px;
      text-align: center;
      margin-top: 0;
    }
    .post-title a {
      color: #333;
    }
    .post-title a:hover {
      color: #3498db;
    }
  4. Below the title, we have post-meta, which consists of the post author name and ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required