ptg16476052176 LESSON 8: Using CSS to Style a Site
The final border style, border-color, is used to set the color for a border. To set the bor-
der color for links to red, you use the following style declaration:
a { border-color: red; }
You can also set border properties for an element using what’s called a shorthand prop-
erty. Instead of using the three separate border properties, you can apply them all simul-
taneously as long as you put the values in the right order, using the border property. It’s
used as follows:
selector { border: style width color; }
So, to add a three-pixel dashed red border to the links on a page, you use the following
style decoration:
a { border: dashed 3px red; }
You can use different values for each side of a box when you’re using any of the box
properties. There are two ways to do so. The first is to add directions to the property
names, as follows :
a {
border-left-width: 3px;
border-left-style: dotted;
border-left-color: green;
}The directions are top, bottom, left, and right. Alternatively, you can set the values for
each side. If you specify four values, they will be applied to the top, right, bottom, and
left, in that order. If you specify two values, they will be applied to the top and bottom
and left and right. And if you set three values, they will be set to the top, right, and left
the same, and bottom. To se t different border widths for all four sides of a box, you use
the following style:
p.box { border-width: 1px 2px 3px 4px; }
That’s equivalent to the following:
p.box {
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
}To apply different values for the border shortcut property to different sides of a box, it’s
necessary to use the directional property names. You can’t supply multiple values for
the components of the shortcut property. However, CSS will apply the styles in the order