Managing Borders
If you choose to surround elements of a Web page with borders, you’re in luck: CSS offers quite a variety of ways to employ borders, and it allows you to add borders to any element you want to.
A border is a frame, just a line usually, that surrounds an element. However, you can selectively leave out any of the four lines of a border or define them each differently using the border-top, border-right, border-bottom, and border-left properties individually.
Specifying a simple border
You’ll find all kinds of borders at your disposal when using CSS. The simplest border specification just uses the border property followed by a series of three values (width, style, and color) separated by spaces, like these.
If you don’t specify a style, you get no border. The default style is none. So don’t assume that if you specify other border-related properties like border width or color, you’ll end up with a border. The border-style property is required.
Choosing from lots of border styles
You can specify eight different border styles: solid, dotted, dashed, double, groove, ridge, inset, or outset. Illustrates each style, although some of them are a bit wider than you’d normally want to use. I’m specifying that each border here be a generous eight pixels for illustrative purposes so you can easily see them in this book. Generally speaking, the only styles you should usually make thick are the frame-like designs: groove, ridge, inset, and outset. These are designed to display shading (by varying the lightness of the lines), so you want the lines large enough so the viewer can actually see the shading.
Mixing and matching styles
If you like, you can use only a one-sided border (or two- or three-sided). You can even to mix and match styles so that, for example, one side is dotted and the rest are double lines. Why you would ever want to do this is another issue, but here’s an example of a graphic bordered on the top and right with the dotted style, the bottom with no border, and the left side the dashed style.
Specifying border width
In addition to altering the border style, you can also vary the size of each individual border (as you can with margins), although this too is useful for few Web page designs. If you wish, use these properties to display a multiethnic border: border-top-width, border-right-width, border-bottom width, and border-left-width.
Coloring a border
Border color is specified with the border-color property. No surprise there. Just use any of the CSS color values described. Remember that if you omit this property, the border takes on the color of the surrounding text, or the text of the parent element, if the local element has no color (such as an image element). The default border color is, therefore, usually black.
Floating About
CSS permits any element to float, just as it extends many other properties to all elements that were in traditional HTML limited to only a few. Designers were able to flow (or wrap) text around an image or table by using the align=” right” code in HTML, but now you can pretty much float anything you wish. Here again, CSS gives designers far greater freedom to design than was previously possible.
Canceling a Float with Clear
The text listed in the HTML following a floating image usually flows down alongside. But what if you want to force some text to detach itself from the image it would normally flow around? What if you want to move it down below the image? Sometimes you don’t want text associated with a particular image.
Last Word
As is usual with CSS (and impossible in traditional HTML), you can apply the clear property to any element, not just text and images. So, if you run into a situation where you want to ensure that an element is positioned below a floating element, use clear.
