Styling the h2 Element

Styling the <h2> Element

The <h2> element is used for the main heading on the page. Its top margin needs to be removed so that the <h2> element lines up with the content in the #nav container. This is achieved using margin-top: 0.

Next, the color can be changed using color: #B23B00.

Standard headings generally are displayed in bold text. You can override this default behavior using font-weight: normal as shown in Listing 19.11. The results can be seen in Figure 19.10.

Listing 19.11. CSS Code for Styling the <h2> 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; } #nav {     float: left;     width: 130px;     display: inline;     margin-left: 20px;     padding: 15px 0; } #nav ul {     margin: 0;     padding: 0;     list-style-type: none;     text-align: right; } #nav li {     background: url(header-bullet.gif) no-repeat 100% .4em;     padding: 0 10px 5px 0; } #content {     float: left;     width: 475px;     margin-left: 45px;     padding: 15px 0; } #footer {     clear: both;     background: #387A9B;     color: #fff;     padding: 5px 10px;     text-align: right;     font-size: 80%; } h2 {     margin-top: 0;     color: #B23B00;     font-weight: normal; } 

Figure 19.10. Screenshot of styled <h2> element.