Set CSS properties

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.

Here is a description of some of the CSS type properties you can set.

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, list a Windows font first. The font attribute is supported by both browsers.

Specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. The style attribute is supported by both browsers.

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.

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.

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.

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.

Capitalizes the first letter of each word in the selection or sets the text to all uppercase or lowercase. The case attribute is supported by both browsers.

Sets the text color. The color attribute is supported by both browsers.

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.

Define CSS style background properties

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.

Here is a description of some of the CSS background properties you can set.

Sets the background image for the element.The background image attribute is supported by both browsers.

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.

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.

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.

Sets the background color for the element. The background color attribute is supported by both browsers.

Define CSS style block properties

You can define spacing and alignment settings for tags and properties.

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.

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.

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.

Sets how text is aligned within the element. The Text Align attribute is supported by both browsers.

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.

Specifies whether an element is displayed and if so how it is displayed. None disables the display of an element to which it is assigned.

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.

Define CSS style box properties

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.

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/

Specifies the sides of an element that do not allow other floating elements.

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.

Sets the same padding properties to the Top, Right, Bottom, and Left of the element to which it is applied.

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.

Sets the width and height of the element.

Define CSS style border properties

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.

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.

Sets the same border style properties to the Top, Right, Bottom, and Left of the element to which it is applied.

Sets the color of the border. You can set each side’s color independently, but the display depends on the browser. Deselect Same For All to set the border color for individual sides of the element.

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.

Define CSS style list properties

The List category of the CSS Rule Definition dialog box defines list settings, such as bullet size and type, for list tags.

Sets the appearance of bullets or numbers. Type is supported by both browsers.

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

Lets you specify a custom image for bullets. Click Browse (Windows) or Choose (Macintosh) to browse to an image, or type the image’s path.

Define CSS style positioning properties

The Positioning style properties determine how the content related to the selected CSS style is positioned on the page.

Leave any of the following properties empty if they are not important to the style:

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.

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).

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.

Defines the part of the content that is visible. If you specify a clipping region, you can access it with a scripting language such as JavaScript and manipulate the properties to create special effects such as wipes. These wipes can be set up by using the Change Property behavior.

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.

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.

Define CSS style extension properties

Extensions style properties include filters, page break, and pointer options.

Changes the pointer image when the pointer is over the object controlled by the style. Select the option you want to set in the pop‑up menu. Internet Explorer 4.0 and later, and Netscape Navigator 6 support this attribute.

Applies special effects to the object controlled by the style, including blur and inversion. Select an effect from the pop‑up menu.

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.