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

Using the CSS Rule Definition Dialog Box

The CSS Rule definition dialog box is a tool that allows web designers to define styles easily and effectively for Dreamweaver CS3. Dreamweaver offers the CSS Rule definition dialog box as a comprehensive compilation of style definition options for nearly every available CSS style. It provides eight categories of style definition, allowing for a total of 71 different style options.

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: Type options

There are two methods for accessing the CSS Rule definition dialog box:

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 CSS Rule Definition Dialog Box: More Options

Type Options

The Type category defines the most basic CSS components. The Type category determines the appearance and format of text for the selected style. Its options include font style, size, weight, case, color, and text decoration.

CSS Rule Definition dialog box: Type options

Font
Specify the font style or font family from the Font pull-down list. If your desired font is not listed, you can edit the list of available fonts.

Size
Specify a size and measurement system for the specified font using the Size pull-down list. You may also type a size in the Size text box.

Weight
Specify the weight, or boldness, of text. You can select predetermined settings from the Weight pull-down list, or type a weight value in the Weight text box.
HINT: The weight of normal text is 400 and the weight of bold text is generally 700.

Style
Specify normal, oblique, or italic attributes for your text.

Variant
Specify normal or small-caps.
NOTE: Small-caps is a font style that displays all letters in uppercase.

Line Height
Specify the leading, or height of a line of text, and its system of measurement.
HINT: To maintain sufficient white space between lines, line height is usually set a couple of points higher than the font size. For an overlapping effect, you can set the line height a couple of points lower than the font size.

Case
Specify uppercase, lowercase, or capitalized attributes for your text.

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

Decoration
Specify the decoration for text by selecting from the available options: overline, underline, line-through, blink, or none.

 

Background Options

The Background category allows you to specify background color and any background images you wish to include. Furthermore, you can set the image location on the page and determine whether or not the image is repeated.

CSS Rule Definition dialog box: Background options

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

Background Image
Specify a background image by typing the filename and path or by browsing to it.

Repeat
Specify the tiling options for a background image:

Attachment
Specify whether the background image remains fixed in its original position or scrolls with the page.

Horizontal Position
Specify left, right, center, or value (in pixels) for the horizontal position of a background image.
NOTE: The default position for all background images is the top left-hand corner of a page. All selections made from this option will impact the default position.

Vertical Position
Specify top, center, bottom, or value (in pixels) for the vertical position of a background image.
NOTE: The default position for all background images is the top left-hand corner of a page. All selections made from this option will impact the default position.

 

Block Options

You can space and align text manually with the Block category.

CSS Rule Definition dialog box: Block options

Word Spacing
Specify the spacing between words by selecting a negative or positive value from the Word spacing pull-down list.

Letter Spacing
Specify the spacing between the letters of words by selecting a negative or positive value from the Letter spacing pull-down list.

Vertical Alignment
Specify the vertical alignment of text in relation to the line of text.

Text Align
Specify text alignment by selecting left, right, center, or justified.

Text Indent
Specify indents for text by selecting a value and system of measurement.

Whitespace
Determine the appearance of extra spaces and tabs, which are usually collapsed by default. Pre preserves all white space, and nowrap wraps text when a <br> tag is present.

Display
Specify whether, and if so how, an element will be displayed (e.g., block, table, inline, table-row) from the Display pull-down list.

 

Box Option

The Box category is primarily used to define the spacing and placement of elements (e.g., images) on a page.

CSS Rule Definition dialog box: Box options

Width
Specify the element's width.

Height
Specify the element's height.

Float
Specify left, right, or none to determine which side elements such as text, layers, and tables will float in relation to other page content.

Clear
Keep a layer from appearing on a selected side of an element.

Padding
Specify the amount of space separating the element and the border or margin. You can specify padding values for the Left, Right, Top and Bottom independently.

Margin
Specify the amount of space between the borders of the element and other elements on the page by designating values for the Left, Right, Top and Bottom independently.


Excellence. Our Measure. Our Motto. Our Goal.