Time for action – sizing headlines to the screen width

Perform the following steps to create headlines that resize according to the width of the browser window:

1. We'll get started by creating a basic HTML document and associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. Inside the HTML document, we're going to create a bit of text with a headline, as follows:

   <div class="content">
     <h1>What is Typography?</h1>
     <p>Typography is the art ...</p>
   </div>

2. Inside styles.css, some basic CSS that is applied helps to set the size of the heading, the paragraph, and padding and margin around both elements. If you take a look at the sample code included with the book, you'll see the following bit of CSS that styles basic text elements:

   .content p {
     line-height: 1.5;
     margin: 1.125em 0;
   }
   
   .content h1 {
     font-size: 3.375em;
     line-height: 1.125;
     margin: 1.125em 0 0.5em 0;
   }

   For our site visitors without JavaScript, this bit of text is...