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; } 

Figure 21.5. Screenshot of styled <h2> and <h3> elements.





Sams Teach Yourself CSS in 10 Minutes
Sams Teach Yourself CSS in 10 Minutes
ISBN: 0672327457
EAN: 2147483647
Year: 2005
Pages: 234
Authors: Russ Weakley

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net