• Choose a category
• All
• Classic-Fiction

By Root 1575 0

I show a technique to define different color schemes for each browser in Chapter 5 of this minibook. For now, avoid shaded styles if this bothers you.

Black shading doesn’t work in IE. IE makes colors darker to get shading effects. If your base color is black, IE can’t make anything darker, so you don’t see the shading effects at all. Likewise, white shading doesn’t work well on Firefox.

The code for the borderProps.html page demonstrates the basic principles of borders in CSS:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

This has a border

Each element can have a border defined. Borders require three attributes:

♦ width: The width of the border. This can be measured in any CSS unit, but border width is normally described in pixels (px) or ems. (Remember: An em is roughly the width of the capital letter “M” in the current font.)

♦ color: The color used to display the border. The color can be defined like any other color in CSS, with color names or hex values.

♦ style: CSS supports a number of border styles. For the example in the following section, I chose a double border. This draws a border with two thinner lines around the element.

You must define all three attributes if you want borders to appear properly. You can’t rely on the default values to work in all browsers.

Defining border styles

After you define the three attributes, it’s time to pick your border style. CSS has a predetermined list of border styles you can choose from. Figure 4-2 shows a page with all the primary border styles displayed.

Figure 4-2: This page shows the main border styles.

You can choose any of these styles for any border:

♦ Solid: A single solid line around the element.

♦ Double: Two lines around the element with a gap between them. The border width is the combined width of both lines and the gap.

♦ Groove: Uses shading to simulate a groove etched in the page.

♦ Ridge: Uses shading to simulate a ridge drawn on the page.

♦ Inset: Uses shading to simulate a pressed-in button.

♦ Outset: Uses shading to simulate a button sticking out from the page.

♦ Dashed: A dashed line around the element.

♦ Dotted: A dotted line around the element.

I didn’t reprint the source of borderStyles.html here, but it’s included on the CD-ROM and Web site if you want to look it over. I added a small margin to each list item to make the borders easier to distinguish. Margins are discussed later in this chapter in the “Borders, margin, and padding” section.

Using the border shortcut

Defining three different CSS attributes for each border is a bit tedious. Fortunately, CSS includes a handy border shortcut that makes borders a lot easier to define, as Figure 4-3 demonstrates.

Figure 4-3: This border is defined with only one CSS rule.

You can’t tell the difference from the output, but the code for borderShortcut.html is extremely simple:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

This page uses the border shortcut

The order in which you describe border attributes doesn’t matter. Just specify a color, a size, and a border style.

Creating partial borders

If you want, you can have more precise control of each side of a border. There are a number of specialized border shortcuts for