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.