This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

CSS Rule Definition Dialog Box: More Options

The CSS Rule definition dialog box is a tool that allows web designers to define styles easily and effectively for CSS. Dreamweaver offers the CSS Rule definition dialog box as a comprehensive compilation of style definition opportunities for nearly every available CSS style.

return to topAccessing the CSS Rule Definition Dialog Box

The CSS Rule definition dialog box appears when you are creating or modifying styles.
CSS Rule Definition dialog box

There are two methods for accessing the CSS Rule definition dialog box: Creating Cascading Style Sheets and Editing Styles

return to topUnderstanding the CSS Rule Definition Dialog Box Options

The CSS Rule definition dialog box consists of eight different categories of definition. The following categories are included in this document

The following categories are included in Using the CSS Definition Dialog Box

Border Options

The Border category allows you to specify border styles, width, and color values for the borders of text, images, and other web elements. You can designate values for individual border edges, or apply one value to all.

CSS  Rule definition dialog box : Border Options

Style
Specify a border style from the following options: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

Width
Specify a border width from thin, medium, or thick, or type a value in any of the Width text boxes.

Color
Specify the border color by typing the color name or color value, or select a color from the Color box.

 

List Options

You can control styles and types of bulleted lists with CSS. The CSS Rule definition dialog box allows you to choose custom bullet images, list types, and different positioning options.

CSS  Rule definition dialog box : List Options

Type
Specify the display type of bullets from the following pre-existing options: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none.

Bullet Image
Specify a custom bullet image or browse to select one.

Position
Specify whether the list item wraps and indents (outside) or wraps to the left margin (inside).

Positioning Options

The Positioning category prescribes the position or placement of CSS elements. This greatly increases a designer's creative control over the appearance of a web page. Positioning options allow you to place an element in the exact position you would like it to appear on the web page.

CSS  Rule definition dialog box : Positioning Options

Type
Specify the element's positioning from the following options:

Visibility
Specify whether an element is visible or hidden on the web page.

Width
Specify the width of an element and the system of measurement.

Z-Index
Specify the depth of an element within layers (higher values are closer to the top).

Height
Specify the height of an element and the system of measurement.

Overflow
Specify how the element should be displayed when a portion of it extends beyond the allotted space: visible, hidden, scroll, or auto.

Placement
Specify the placement and dimensions of an element.

Clip
Specify the visible portions of an element.

Extensions Options

The Extensions category allows you to specify page breaks for printing, change insertion point images, and customize the appearance of various elements.

CSS Rule Definition dialog box: Extensions Options

Page Break
Specify a point for printers to read a page break.

Cursor
Specify the cursor type that appears when the mouse moves over a certain element
.

Filter
Customize the appearance of an element without using animation or graphic files (e.g., blur).

Insertion Point Options Illustrated

The following table illustrates the options available for specifying the cursor image that appears when the mouse moves over a certain element.

Option Cursor Image Option Cursor Image
Hand Hand N-resize North resize
Crosshair Crosshair NW-resize Northwest Resize
Text Text W-resize West resize
Wait Hourgalss SW-resize Southwest resize
Default arrow S-resize South resize
Help Help SE-resize Southeast Resize
E-resize East resize Auto arrow
NE-resize Northeast resize    
Excellence. Our Measure. Our Motto. Our Goal.