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