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.

Figure 8.2. Screenshot of bordered heading.


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.





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