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 header and the navigation appearance with CSS


The steps are as follows:

  1. Open main.css.

  2. Add some whitespace surrounding the header with padding, and also set the header color to #333, as follows:

    .blog-header {
    padding: 30px 15px;
    background-color: #333;
    }
  3. To make the logo look prominent, we will set it with Varela Round font, which is the same font family we used for the headings. We also make it bigger and transform the letters all to uppercase, as follows:

     .blog-name {
      font-family: "Varela Round", Arial, sans-serif;
      font-weight: 400;
      font-size: 42px;
      text-align: center;
      text-transform: uppercase;
    }
  4. The logo link color currently is #2a84bf, which is the common color we set for links <a>. This color does not suit well with the background color. Let's change the color to white instead, as follows:

    .blog-name a {
        color: #fff;
    }
  5. Set the search input styles, as follows:

    .search-form input {
      height: 36px;
      background-color: #ccc;
      color: #555;
    ...