Styling the h2 Element


Styling the <h2> Element

Now that the <div> has been styled, the <h2> element will be used to position the second background image in the top-right corner.

The <h2> element's margins have to be turned off using margin: 0.

Next, the <h2> needs some padding on all edges except the bottom. This is achieved using padding: 20px 20px 0 20px.

Finally, the background image is added using background: url (lesson17b.gif) no-repeat 100% 0;. The horizontal background position is set to 100%, so the right edge of the image will sit against the right edge of the <h2> element. The image is also set to no-repeat so that it does not repeat across the background of the <h2> element as shown in Listing 17.4. The results can be seen in Figure 17.6.

Listing 17.4. CSS Code for Styling the <div> Element
div#pullquote {     margin: 2em;     background: #09f url(lesson17a.gif) no-repeat; } div#pullquote h2 {     margin: 0;     padding: 20px 20px 0 20px;     background: url(lesson17b.gif) no-repeat 100% 0; } 

Figure 17.6. Screenshot of styled <h2> element.





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