You can define properties for CSS rules such as text font, background image and color, spacing and layout properties, and the appearance of list elements. First create a new rule, then set any of the following properties.
You use the Type category in the CSS Rule Definition dialog box to define basic font and type settings for a CSS style.
Font-family
Sets the font family (or series of families) for the style. Browsers display text in the first font in the series that is installed on the user’s system. For compatibility with Internet Explorer 3.0, list a Windows font first. The font attribute is supported by both browsers.
Font-size
Defines the size of the text. You can choose a specific size by selecting the number and the unit of measurement, or you can choose a relative size. Pixels work well to prevent browsers from distorting your text. The size attribute is supported by both browsers.
Font-style
Specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. The style attribute is supported by both browsers.
Line-height
Sets the height of the line on which the text is placed. This setting is traditionally called leading. Select Normal to have the line height for the font size calculated automatically, or enter an exact value and select a unit of measurement.The line height attribute is supported by both browsers.
Text-decoration
Adds an underline, overline, or line-through to the text, or makes the text blink. The default setting for regular text is None. The default setting for links is Underline. When you set the link setting to none, you can remove the underline from links by defining a special class.The decoration attribute is supported by both browsers.
Font-weight
Applies a specific or relative amount of boldface to the font. Normal is equivalent to 400; Bold is equivalent to 700. The weight attribute is supported by both browsers.
Font-variant
Sets the small caps variant on text. Dreamweaver does not display this attribute in the Document window. The variant attribute is supported by Internet Explorer but not Navigator.
Use the Background category of the CSS Rule Definition dialog box to define background settings for a CSS style. You can apply background properties to any element in a web page. For example, create a style which adds a background color or background image to any page element, for example behind text, a table, the page, and so on. You can also set the positioning of a background image.
Background Color
Sets the background color for the element. The background color attribute is supported by both browsers.
Background Image
Sets the background image for the element.The background image attribute is supported by both browsers.
Background Repeat
Determines whether and how the background image is repeated. The Repeat attribute is supported by both browsers.
No Repeat displays the image once at the beginning of the element.
Repeat tiles the image horizontally and vertically behind the element.
Repeat‑x and Repeat‑y display a horizontal and vertical band of images, respectively. Images are clipped to fit within the boundaries of the element.
Note: Use the Repeat property to redefine the body tag and set a background image that does not tile or repeat.
Background Attachment
Determines whether the background image is fixed at its original position or scrolls along with the content. Note that some browsers may treat the Fixed option as Scroll. This is supported by Internet Explorer but not Netscape Navigator.
Background Position (X) and Background Position (Y)
Specify the initial position of the background image in relation to the element. This can be used to align a background image to the center of the page, both vertically (Y) and horizontally (X). If the attachment property is Fixed, the position is relative to the Document window, not to the element.
You use the Block category of the CSS Rule Definition dialog box to define spacing and alignment settings for tags and properties.
- In the CSS Rule Definition dialog box, select Block, then set any of the following style properties. (Leave the property blank if it is not important to the style.)
Word Spacing
Sets the spacing between words. To set a specific value, in the pop‑up menu, select Value, then enter a numeric value. In the second pop‑up menu, select a measurement unit (for example, pixel, points, and so on).
Note: You can specify negative values, but the display depends on the browser. Dreamweaver does not display this attribute in the Document window.
Letter Spacing
Increases or decreases space between letters or characters. To decrease the space between characters specify a negative value, for example (‑4). Letter spacing settings override justified text settings. The Letter Spacing attribute is supported by Internet Explorer 4 and later and Netscape Navigator 6.
Vertical Align
Specifies the vertical alignment of the element to which it is applied. Dreamweaver displays this attribute in the Document window only when it is applied to the <img> tag.
Text Align
Sets how text is aligned within the element. The Text Align attribute is supported by both browsers.
Text Indent
Specifies how far the first line of text indents. A negative value may be used to create an outdent, but the display depends on the browser. Dreamweaver displays this attribute in the Document window only when the tag is applied to block-level elements. The Text Indent attribute is supported by both browsers.
Whitespace
Determines how white space within the element is handled. Select from three options: Normal collapses white space; Pre handles it as if the text were enclosed in pre tags (that is, all white space, including spaces, tabs, and returns, is respected); Nowrap specifies that the text only wraps when a br tag is encountered. Dreamweaver does not display this attribute in the Document window. The Whitespace attribute is supported by Netscape Navigator and Internet Explorer 5.5.
Use the Box category of the CSS Rule Definition dialog box to define settings for tags and properties that control the placement of elements on the page.
You can apply settings to individual sides of an element when applying padding and margin settings, or use the Same For All setting to apply the same setting to all sides of an element.
- In the CSS Rule Definition dialog box, select Box, and set any of the following style properties. (Leave the property blank if it is not important to the style.)
Float
Specifies the side around which other elements flow around the floated element. The floated element is fixed to the float side and other contents flow around it on the opposite side.
For example, an image that is floated right is fixed to the right, and content that you add later flows to the left of the image.
For more information, see http://css-tricks.com/all-about-floats/
Padding
Specifies the amount of space between the content of an element and its border (or margin if there is no border). Deselect the Same For All option to set the padding for individual sides of the element.
Same For All
Sets the same padding properties to the Top, Right, Bottom, and Left of the element to which it is applied.
Margin
Specifies the amount of space between the border of an element (or the padding if there is no border) and another element. Dreamweaver displays this attribute in the Document window only when it is applied to block-level elements (paragraphs, headings, lists, and so on). Deselect Same For All to set the margin for individual sides of the element.
Use the Border category of the CSS Rule Definition dialog box to define settings, such as width, color, and style, for the borders around elements.
- In the CSS Rule Definition dialog box, select Border, and set any of the following style properties. (Leave the property blank if it is not important to the style.)
Type
Sets the style appearance of the border. The way the style appears depends on the browser. Deselect Same For All to set the border style for individual sides of the element.
Same For All
Sets the same border style properties to the Top, Right, Bottom, and Left of the element to which it is applied.
Width
Sets the thickness of the element’s border. The Width attribute is supported by both browsers. Deselect Same For All to set the border width for individual sides of the element.
Same For All
Sets the same border width to the Top, Right, Bottom, and Left of the element to which it is applied.
The List category of the CSS Rule Definition dialog box defines list settings, such as bullet size and type, for list tags.
The Positioning style properties determine how the content related to the selected CSS style is positioned on the page.
- In the CSS Rule Definition dialog box, select Positioning, and then set the style properties you want.
Position
Determines how the browser should position the selected element as follows:
Absolute places the content using the coordinates entered in the Placement boxes relative to the nearest absolutely- or relatively-positioned ancestor, or, if no absolutely- or relatively-positioned ancestor exists, to the upper-left corner of the page.
Relative places the content block using the coordinates entered in the Placement boxes relative to block’s position in the text flow of the document. For example, giving an element a relative position and top and left coordinates of 20px each will shift the element 20px to the right and 20px down from its normal position in the flow. Elements can also be positioned relatively, with or without top, left, right, or bottom coordinates, to establish a context for absolutely-positioned children.
Fixed places the content using the coordinates entered in the Placement boxes, relative to the top left corner of the browser. The content will remain fixed in this position as the user scrolls the page.
Static places the content at its location in the text flow. This is the default position of all positionable HTML elements.
Visibility
Determines the initial display condition of the content. If you do not specify a visibility property, by default the content inherits the parent tag’s value. The default visibility of the body tag is visible. Select one of the following visibility options:
Inherit inherits the visibility property of the content’s parent.
Visible displays the content, regardless of the parent’s value.
Hidden hides the content, regardless of the parent’s value.
Z‑Index
Determines the stacking order of the content. Elements with a higher z-index appear above elements with a lower z-index (or none at all). Values can be positive or negative. (If your content is absolutely positioned, it’s easier to change the stacking order using the AP Elements panel).
Overflow
Determines what happens if the contents of a container (for example, a DIV or a P) exceed its size. These properties control the expansion as follows:
Visible increases the container’s size so that all of its contents are visible. The container expands down and to the right.
Hidden maintains the container’s size and clips any content that doesn’t fit. No scroll bars are provided.
Scroll adds scroll bars to the container regardless of whether the contents exceed the container’s size. Specifically providing scroll bars avoids confusion caused by the appearance and disappearance of scroll bars in a dynamic environment. This option is not displayed in the Document window.
Auto makes scroll bars appear only when the container’s contents exceed its boundaries. This option is not displayed in the Document window.
Placement
Specifies the location and size of the content block. How the browser interprets the location depends on the setting for Type. Size values are overridden if the content of the content block exceeds the specified size.
The default units for location and size are pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), (ems), (exs), or % (percentage of the parent’s value). The abbreviations must follow the value without a space: for example, 3mm.
Note:
There are a number of other extension properties available in Dreamweaver, but to access them, you need to go through the CSS Styles panel. You can easily see a list of extension properties available by opening the CSS Styles panel (Windows > CSS Styles), clicking the Show Category View button at the bottom of the panel, and expanding the Extensions category.
- In the CSS Rule Definition dialog box, select Extensions, and set any of the following style properties. (Leave the property blank if it is not important to the style.)
Page break before
Forces a page break during printing either before or after the object controlled by the style. Select the option you want to set in the pop‑up menu. This option is not supported by any 4.0 browser, but support may be provided by future browsers.

