Styling the <h1> Element

Styling the <h1> Element

The first step in styling the heading is to set a background color. You can use background: #D36832. The color can then be set to #fff.

Next, padding: 20px can be applied to create some space around the <h1> content.

You will then need to set margin: 0 to remove the default top and bottom margins.

You also can add a border to the bottom of the <h1> element using the shorthand border: 5px solid #387A9B; as shown in Listing 19.5. The results can be seen in Figure 19.4.

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

body
{
    text-align: center;
    background: #B0BFC2;
    color: #444;
}

#container
{
    text-align: left;
    margin: 0 auto;
    width: 700px;
    background: #FFF url(header-base.gif) repeat-y;
}

h1
{
    background: #D36832;
    color: #FFF;
    padding: 20px;
    margin: 0;
    border-bottom: 5px solid #387A9B;
}

Figure 19.4. Screenshot of styled <h1> element.