Book Image

Responsive Web Design by Example : Beginner's Guide

By : Thoriq Firdaus
Book Image

Responsive Web Design by Example : Beginner's Guide

By: Thoriq Firdaus

Overview of this book

Table of Contents (16 chapters)
Responsive Web Design by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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 the post publishing date. Similar to the title, we also adjust the font size and the whitespace, and change the font color, as follows:

    .post-meta {
      font-size: 18px;
      margin: 20px 0 0;
      text-align: center;
      color: #999;
    }
    .post...