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.