• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 21. Positioning Three Columns wit... > Styling the <h2> and <h3> Elements

Styling the <h2> and <h3> Elements

The <h2> and <h3> elements sit inside the #container and #container2 elements. Some browsers will display these heading elements and their top margin inside the container. Other browsers will display the headings only and allow the margin to poke out the top of the container. This is explained in more detail in the “Trapping Margins” Note in Lesson 13, “Styling a Block Quote.” There are many ways to overcome this problem. In this lesson, the top margins on the <h2> and <h3> elements will be removed using margin-top: 0 (see Listing 21.5 and Figure 21.5).

Listing 21.5. CSS Code for Styling the <h2> and <h3> Elements

body
{
    margin: 0;
    padding: 0;
    font: 90% arial, helvetica, sans-serif;
    background: #387A9B;
    color: #333;
}

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

h2, h3
{
    margin-top: 0;
}


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint