Styling the <h1> Element

Styling the <h1> Element

As you saw in Listing 18.1, the <h1> element contains an image. This site header graphic is placed inside the <h1> element to give it greater semantic meaning. Screen readers and text-based browsers will read the alt attribute "Sitename" as if it were a text heading.

You will need to set margins and padding to 0 so that the image can sit against the top edge of the browser window.

You also can add a white border to the bottom of the <h1> element using the shorthand border: 1px solid #fff; as shown in Listing 18.5. The results can be seen in Figure 18.3.

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

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

#container
{
    text-align: left;
    margin: 0 auto;
    width: 700px;
    background: #FFF;
}

h1
{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #fff;
}

Figure 18.3. Screenshot of styled <h1> element.