Time for action – creating a bold text block with SlabText

Perform the following steps to break a headline into multiple lines, all resized to fit the width perfectly:

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 place a headline as follows:

   <header>
     <h1>Pride &amp; Prejudice</h1>
   </header>

2. Next, we'll add some styles to style our headline the way we'd like. Open your styles.css file and add the following lines:

   header {
     margin: 5.063em 0;
   }
   
   header h1 {
     line-height: 1.125;
     margin: 0;
     padding: 0;
     text-transform: uppercase;
   }
   
   h1 {
     font-size: 3.375em;
   }

   We've removed any default margins or padding from the <h1> element. We'll use the <header> element to add white space around our headline instead. Also, note that we used a unitless number for our line-height value. Unitless line heights allow these values to...