CSS Syntax

Value

Up to two values (other than inherit). One represents the angle, clockwise from straight ahead; the second is a 20-degree incremental movement to the left or right. An angle value is any value in the range of -360 to +360 (inclusive) plus the letters "deg", as in 90deg. The value 0deg is directly in front of the listener. To set the angle to the left of the listener, the value can be either -90deg or 270deg. Optionally, you can choose an angleConstant value from a large library of descriptions that correspond to fixed points around the circle. If you add the behind modifier, the values shift from in front of the listener to behind the listener.

For the direction value, you can choose from two constants: leftwards | rightwards. These settings shift the sound 20 degrees in the named direction.

Initial Value

center

Example

h1 {azimuth: 45deg}
p.aside {azimuth: center-right behind}

Applies To

All elements.

CSS Syntax

Value

CSS-formatted URL value, with the actual URL pointing to an external .htc file, ID of an object element that loads a behavior ActiveX control into the page, or one of the built-in default behaviors (in the format url(#default#behaviorName)). Default behavior names are:

CSS Syntax

border-bottom-style: style
border-left-style: style
border-right-style: style
border-top-style: style

Value

Style values are constants that are associated with specific ways of rendering border lines. Not all browser versions recognize all of the values in the CSS recommendation. Style support is shown in the following table.

Figure 11-1. Border-style gallery

Initial Value

none

Example

p {border-style: solid; border-bottom-style: none}
div {border-left-style: ridge}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.borderBottomStyle
[window.]document.getElementById("elementID").style.borderLeftStyle
[window.]document.getElementById("elementID").style.borderRightStyle
[window.]document.getElementById("elementID").style.borderTopStyle

CSS Syntax

Value

For Navigator 4, one color value only. In Internet Explorer and Netscape 6, this attribute accepts one, two, three, or four color values, depending on how many and which borders you want to set with specific colors. Value quantities and positions are interpreted as shown in the following table.

Initial Value

The element's color style property (which is inherited if not specifically assigned for the element).

Example

h2 {border-color: red blue red}
div {border-color: red rgb(0,0,255) red}

Applies To

All elements, but only block and replaced elements in IE 4 and 5 for Windows.

Object Model Reference

Figure 11-2. The geometry of a table element

CSS Syntax

Value

See the discussion of length values at the beginning of this chapter. If you want no spacing along one axis, set its value to zero.

Initial Value

0

Applies To

The table element.

CSS Syntax

Value

Style values are constants that are associated with specific ways of rendering border lines. Not all browsers recognize all of the values in the CSS recommendation. Style support is as follows.

The precise manner in which browsers interpret the definitions of the style values is far from universal. Figure 11-1 shows a gallery of all styles as rendered by Internet Explorer 6 for Windows, Explorer 5 for Macintosh, and Netscape 6. Do not expect the exact same look in all browsers.

For Navigator 4, you may apply one style value only. In Internet Explorer and Netscape 6, this attribute accepts one, two, three, or four space-delimited borderStyle values, depending on how many and which borders you want to set with specific styles. Value quantities and positions are interpreted as shown in the following table.

Initial Value

none

Example

h1 {border-style: ridge; border-width: 3px}
div {border-style: solid double; border-width: 4px}

Applies To

All elements, but only block and replaced elements in IE 4 and 5 for Windows.

Object Model Reference

CSS Syntax

Value

Three constants—thin | medium | thick—allow the browser to define how many pixels are used to show the border. For more precision, you can also assign a length value (see the discussion of length values at the beginning of this chapter).

This attribute accepts one, two, three, or four space-delimited borderWidth values, depending on how many and which borders you want to set with specific styles. Value quantities and positions are interpreted as follows.

Initial Value

medium (IE and NN 6); 0 (NN 4)

Example

h1 {border-style: ridge; border-width: 3px 5px 3px}
div {border-style: solid double; border-width: 4px}

Applies To

All elements, but only block and replaced elements in IE 4 and 5 for Windows.

Object Model Reference

Figure 11-3. Internet Explorer cursor gallery

CSS Syntax

Value

A cursor type is one of the implemented cursor names. The following table shows which cursor types are supported by various browsers and the CSS standard.

Notice that IE 6 for Windows implements downloadable cursors. The IE 6 setting for an external URL requires an address of a cursor file of extension .cur or .ani (which you create with a graphics utility that creates Windows cursors).

Initial Value

auto

Example

Applies To

All elements.

Perhaps the most frequently used aspect of the display style attribute in DHTML is setting the scripts to toggle between showing and completely hiding the element and its space. When the attribute is set to none, the element is hidden from view, and all surrounding content cinches up to occupy whatever space the element would normally occupy. This is different from the visibility attribute, which reserves space for the element while hiding it from view. But to redisplay the item to its default display mode, you can assign one of the common display types (block and inline) or the more specific type associated with the element (such as list-item for an li element), if supported by your target browsers.

CSS Syntax

Value

The CSS specification identifies many display types, but browser support is more limited. The following table shows the supported types.

Initial Value

Element-dependent.

Example

Applies To

All elements (but some display types are applicable to specific elements).

Object Model Reference

CSS Syntax

Value

Your choice of a specific angle (in degrees) or one of the five constant values. An angle value is any value in the range of -90 to +90 (inclusive) plus the letters "deg", as in 90deg. The value 0deg is at the same vertical level as the listener's ear. To set the angle above level, the value must be a positive value (45deg); below level requires a negative value (-45deg). Optionally, you can choose an angleConstant value from a library of descriptions that correspond to fixed points above and below level.

In combination with the azimuth attribute, you can place a sound at any point around a spherical surround-sound stage.

Initial Value

level

Example

h1 {elevation: -45deg}
p.heavenly {elevation: above}

Applies To

All elements.

CSS Syntax

filter: filterType1(paramName1=value1, paramName2=value2,...) 
        filterType2(paramName1=value1,...) ...

Value

Each filter attribute may have more than one space-delimited filter type associated with it. Each filter type is followed by a pair of parentheses, which may convey parameters about the behavior of the filter for the current element. A parameter generally consists of a name/value pair, with assignment performed by the equals symbol. See the "Notes" section below for details on filterType values and parameters.

Initial Value

None.

Example

Applies To

body, button, img, input, marquee, table, td, textarea, tfoot, th, thead, tr, and absolute-positioned div and span elements.

Object Model Reference

Notes

First-generation filters (which continue to be supported at least through IE 6 for Windows) are divided into three broad categories: visual, reveal, and blend. Each category has its own parameter names. You can mix categories within a single filter attribute assignment and have quite a bit of fun experimenting with the combinations. Observe carefully the limitations about the elements to which you may assign filters.

The visual filters and their parameters are as follows:

alpha( )

Controls transparency level. The opacity and finishopacity parameters can be set from transparent (0) to opaque (100). The style parameter sets the opacity gradient shape: uniform (0), linear (1), radial (2), rectangular (3). startX and startY set the horizontal and vertical coordinates for opacity gradient start, whereas finishX and finishY set the horizontal and vertical coordinates for opacity gradient end.

blur( )

Gives the element the appearance of motion. The add parameter specifies whether to add the original image to the blurred image (1) or to omit it (0). direction sets the angle of the blurred image relative to the original image location: above (0); above-right (45); right (90); below-right (135); below (180); below-left (225); left (270); above-left (315). strength indicates the number of pixels for the blurred image to extend.

chroma( )

Sets a color transparent. The color parameter specifies the hexadecimal triplet value of the color to be made transparent.

dropShadow( )

Creates an offset shadow for apparent depth. The color parameter sets the hexadecimal triplet value of color for drop shadow. offx and offy specify the number of pixels between the element and the drop shadow along the x and y axes (positive values to the right/down; negative to the left/up). The positive parameter specifies whether only positive pixels generate drop shadows (1) or transparent pixels as well (0).

flipH( )

Creates a horizontally mirrored image of the element.

flipV( )

Creates a vertically mirrored image of the element.

glow( )

Adds radiance to outer edges. The color parameter sets the hexadecimal triplet value of the color for the radiance effect and strength sets the radiance intensity (1-255).

gray( )

Removes colors but retains luminance.

invert( )

Reverses the hue, saturation, and brightness (HSV) levels.

light( )

Shines a light source on the element (numerous filter method calls are available to set specific types of light sources, locations, intensities, and colors).

mask( )

Creates a transparent mask. The color parameter sets the hexadecimal triplet value of the color applied to transparent regions.

shadow( )

Displays the element as a solid silhouette. The color parameter sets the hexadecimal triplet value of the color used for shadows and direction sets the angle of the shadow relative to the original image location: above (0); above-right (45); right (90); below-right (135); below (180); below-left (225); left (270); above-left (315).

wave( )

Renders the element with a sine wave distortion along the x-axis. The add parameter specifies whether to add the original image to waved image (1) or not (0). freq sets the number of waves to be applied to visual distortion, light sets the light strength (0-100), phase sets the percentage offset for the sine wave (0-100 corresponding to to 360 degrees), and strength sets the wave effect intensity (0-255).

xRay( )

Renders only the edges.

The blend and reveal transition filters and parameters are as follows:

blendTrans( )

Fades the element in or out. The duration parameter sets the floating-point value (seconds.milliseconds) of how long the transition effect should take.

revealTrans( )

Sets a transition effect between appearance states of an element. The duration parameter sets the floating-point value (seconds.milliseconds) of how long the transition effect should take. transition is a key integer that corresponds to one of the following transition types.

Both transition filters have a set of three methods: apply( ), play( ), and stop( ). Use apply( ) to freeze the element's display while you change the element's visibility or other visual attribute; then invoke the play( ) method on the filter to let the transition be seen by the user:

document.getElementById("myImg").filters["revealTrans"].apply( );
document.getElementById("myImg").src = "newPix.jpg";
document.getElementById("myImg").filters["revealTrans"].play( );

A style sheet rule for the element may have been set to the following:

When the script statements execute, the change from one image to another occurs through a "circle in" reveal transition.

CSS Syntax

filter:progid:DXImageTransform.Microsoft.filterType1(paramName1=value1, 
paramName2=value2,...) 
progid:DXImageTransform.Microsoft.filterType2(paramName1=value1,...) ...

Value

Each filter type must be preceded by the reference to the ActiveX control (progid:DXImageTransform.Microsoft.), and multiple filter types for a single filter style attribute are space delimited. Each filter type is followed by a pair of parentheses, which may convey parameters about the behavior of the filter for the current element. A parameter generally consists of a name/value pair, with assignment performed by the equals symbol. Filter types that control transitions also have methods that scripts invoke to freeze the display while some visible attribute of the element changes (also under script control) and then play the transition. (See the "Notes" section below for information about filterType values and parameters.

Initial Value

None.

Example

.fastStuff {filter:progid:DXImageTransform.Microsoft.MotionBlur(add=1, 
direction=225)}

Applies To

All elements.

Object Model Reference

[window.]document.getElementById("elementID").filters[
  "DXImageTransform.Microsoft.filterName"]

Notes

Successful deployment of these filters, especially on complex content, requires extensive experimentation and testing to make sure that your combination doesn't crash the browser.

A font family may consist of multiple font definitions. For example, a Helvetica font family may also include a bold version and an italic version—genuinely distinct fonts rather than the approximated versions of bold and italic. When you specify a font family by name, the browser looks into the client's system to see if there is a font available by that name. If not, the browser looks to the next font family name in the list. Therefore, it is wise to include font family names in a sequence that goes from the most esoteric to the most generic. The final font family name should be the generic family (serif, sans-serif, cursive, fantasy, or monospace) that most closely resembles the desired font. Many fonts that are widely installed on one operating system may not be as popular on another operating system.

Browsers following the CSS2 specification should also be smart enough to recognize Unicode character codes and try to match them with named font families that cater to particular languages. Ideally, this will allow a browser to mix fonts from different languages and writing systems in the same element, provided each font-family is listed in the attribute value.

CSS Syntax

Value

Any number of font family names, comma delimited. Multiword family names must be quoted. Recognized generic family names are: serif | sans-serif | cursive | fantasy | monospace.

Initial Value

Browser default.

Example

Applies To

All elements.

Object Model Reference

Notes

Internet Explorer provide facilities for downloading font definition files for a browser that doesn't have a special font that the page designer wants for the page. The font definition files must be created by the author using browser-specific font conversion tools. An @font-face style sheet rule downloads the font definition file and associates that font description with an arbitrary font family name:

Figure 11-4. Font size constant values in Netscape 6 on the Windows and Mac platforms

Figure 11-5. Font size constant values in IE on the Windows and Mac platforms

Another collection of constants (larger, smaller) are known as relative sizes. Because the font-size attribute is inherited from the parent element, these relative sizes are applied to the parent element to determine the font size of the current element. It is up to the browser to determine exactly how much larger or smaller the font size is, and a lot depends on how the parent element's font size is set. If it is set with one of the absolute sizes (large, for example), a child's font size of larger means that the font is rendered in the browser's x-large size. The increments are not as clear cut when the parent font size is set with a length or percentage.

If you elect to use a length value for the font-size attribute, choose a unit that makes the most sense for fonts rendered on the output medium, such as pixels (px) for screen display and points (pt) or ems (em) for printed output. Em values are calculated relative to the size of the parent element's font size. Finally, you can set the font-size to a percentage, which is calculated based on the size of the parent element's font size.

Some browsers hijack your best efforts at precisely sizing fonts, using their own (or user) settings to establish a "medium" size. That is why many designers prefer to rely on the relative-size constants for their font-size specification schemes. This choice means giving up a level of control over rendering from one browser and operating system to the next, but attempting too strict control on uniform rendering generally leads to utter frustration.

CSS Syntax

Value

For an absolute size, one of the following constants: xx-small | x-small | small | medium | large | x-large | xx-large. For a relative size, one of the following constants: larger | smaller. For a length, see the discussion about length values at the beginning of this chapter. For a percentage, the percentage value and the % symbol.

Initial Value

medium (for BODY element); the parent element's font-size value (for all others).

Example

body {font-size: 14pt}
p.teeny {font-size: x-small}
em {font-size: larger}
span.larger {font-size: 150%}

Applies To

All elements.

Object Model Reference