Dreamweaver

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.

Define CSS type properties

You use the Type category in the CSS Rule Definition dialog box to define basic font and type settings for a CSS style.

  1. Open the CSS Styles panel (Shift + F11), if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. In the CSS Rule Definition dialog box, select Type, and then set the style properties.

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

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

    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.

    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.

    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.

    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.

    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.

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

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

  4. When you are finished setting these options, select another CSS category on the left side of the panel to set additional style properties, or click OK.

Define CSS style background properties

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.

  1. Open the CSS Styles panel (Shift+F11), if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. In the CSS Rule Definition dialog box, select Background, then set the style properties.

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

    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.

    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.

    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.

    Horizontal Position and Vertical Position
    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 and horizontally. If the attachment property is Fixed, the position is relative to the Document window, not to the element. This attribute is supported by Internet Explorer but not Netscape Navigator.

  4. When you are finished setting these options, select another CSS category on the left side of the panel to set additional style properties, or click OK.

Define CSS style block properties

You use the Block category of the CSS Rule Definition dialog box to define spacing and alignment settings for tags and properties.

  1. Open the CSS Styles panel (Shift+F11), if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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 Alignment
    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.

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

  4. When you are finished setting these options, select another CSS category on the left side of the panel to set additional style properties, or click OK.

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.

  1. Open the CSS Styles panel (Shift + F11), if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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.)
    Width and Height
    Sets the width and height of the element.

    Float
    Sets which side other elements, such as text, AP Divs, tables and so on, will float around an element. Other elements wrap around the floating element as usual. The Float attribute is supported by both browsers.

    Clear
    Defines the sides that do not allow AP elements. If an AP element appears on the clear side, the element with the clear setting moves below it. The Clear attribute is supported by both browsers.

    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.

    Same For All
    Sets the same margin properties to the Top, Right, Bottom, and Left of the element to which it is applied.

  4. When you are finished setting these options, select another CSS category on the left side of the panel to set additional style properties, or click OK.

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.

  1. Open the CSS Styles panel (Shift+F11), if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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.)
    Style
    Sets the style appearance of the border. The way the style appears depends on the browser. Dreamweaver renders all styles as solid in the Document window. The style attribute is supported by both browsers. 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.

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

    Same For All
    Sets the same border color to the Top, Right, Bottom, and Left of the element to which it is applied.

  4. When you are finished setting these options, select another CSS category on the left side of the panel to set additional style properties, or click OK.

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.

  1. Open the CSS Styles panel (Shift+F11), if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. In the CSS Rule Definition dialog box, select List, and set any of the following style properties. (Leave the property blank if it is not important to the style.)
    Type
    Sets the appearance of bullets or numbers. Type is supported by both browsers.

    Bullet Image
    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.

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

  4. When you are finished setting these options, select another CSS category on the left side of the panel to set additional style properties, or click OK.

Define CSS style positioning properties

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

  1. Open the CSS Styles panel (Shift+F11), if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. In the CSS Rule Definition dialog box, select Positioning, and then set the style properties you want.

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

    Type
    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 (default) 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 .

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

  4. When you are finished setting these options, select another CSS category on the left side of the panel to set additional style properties, or click OK.

Define CSS style extension properties

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

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.
  1. Open the CSS Styles panel (Shift + F11), if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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.)
    Pagebreak
    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.

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

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

  4. When you are finished setting these options, select another CSS category on the left side of the panel to set additional style properties, or click OK.