Applying Padding and Borders

Applying Padding and Borders

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.

Listing 8.5. CSS Code Adding Borders

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

CSS Borders CSS Border properties define the borders around an element. border-color sets the color of the border (for example, red, transparent, none, #036, #003366). border-width sets the thickness of the border (for example, thin, medium, thick, 1px, .5em, 1ex). border-style sets the appearance of the border (for example, none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset). Border properties and values can be specified in many ways. The simplest option is to use the shorthand border property like this: border: (width) (style) (color); Some border styles, such as dotted, are not supported by Internet Explorer 5 or 5.5.