Later in this lesson, you will be adding borders to the top and bottom of the heading. To avoid placing the text hard against the borders, you will need to add some top and bottom padding. You can use the shorthand padding property, setting top and bottom padding to .4em, and left and right padding to 0. To apply borders to the top and bottom of the heading, use the border-top and border-bottom properties as shown in Listing 8.5. The results can be seen in Figure 8.2. The borders can be removed or changed to suit your needs. Figure 8.2. Screenshot of bordered heading.
Listing 8.5. CSS Code Adding Bordersh1#header { color: #036; font-size: 120%; font-weight: normal; text-transform: uppercase; text-align: center; letter-spacing: .5em; padding: .4em 0; border-top: 1px solid #069; border-bottom: 1px solid #069; }
|