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.