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.
- Accessing the CSS Rule Definition Dialog Box
- Understanding the CSS Rule Definition Dialog Box Options
Accessing the CSS Rule Definition Dialog Box
The CSS Rule definition dialog box appears when you are creating or modifying styles.
There are two methods for accessing the CSS Rule definition dialog box: Creating Cascading Style Sheets and Editing Styles
Understanding 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.
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.
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.
Type
Specify the element's positioning from the following options:
- Absolute: an element's positioning is stable on the page, regardless of the positioning of other element
- Fixed: an element's positioning is relative to the top left corner of the browser window
- Relative: an element's positioning corresponds with that of the other elements on the page
- Static: an element's positioning is disabled; the element is displayed as it would be in regular HTML
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.
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 |  |
N-resize |  |
| Crosshair |  |
NW-resize |  |
| Text |  |
W-resize |  |
| Wait |  |
SW-resize |  |
| Default |  |
S-resize | |
| Help |  |
SE-resize | |
| E-resize | |
Auto | |
| NE-resize | |
