Styling the h1 Element

Styling the <h1> Element

The <h1> element will be used to create the top banner.

First, the background-color and color properties must be set. In this example, you will use a background color of #D36832 and a color of #fff.

Standard <h1> elements have predefined top and bottom margins. To force the <h1> element into the top corner of the browser window, these margins must be set to 0.

To create space around the <h1> content, padding: .5em 3%; is used. This will put .5em of padding on the top and bottom of the content, and 3% on the left and right edges.

Finally, a border is applied to the bottom of the element using border-bottom: 5px solid #387A9B; as shown in Listing 21.4 and Figure 21.4.

Listing 21.4. CSS Code for Styling the <h1> Element

 body {     margin: 0;     padding: 0;     font: 90% arial, helvetica, sans-serif;     background: #387A9B;     color: #333; } h1 {     background: #D36832;     color: #FFF;     margin: 0;     padding: .5em 3%;     border-bottom: 5px solid #387A9B; } 

Figure 21.4. Screenshot of the styled <h1> element.