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 ...

Get HTML5 and CSS3: Building Responsive Websites now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.