Style Pane Properties

Tiles the element's background image.

• ensures that only one copy of the image appears.
• repeats the image horizontally.
• repeats the image vertically.
• tiles the image both horizontally and vertically.

Specifies the position of the element's background image.

• To set the horizontal position of the background image, enter a value in the X text box and select a unit of measurement. Alternatively, select Left or Right in the dropdown list.
• To set the vertical position of the background image, enter a value in the Y text box and select a unit of measurement. Alternatively, select Top or Bottom in the dropdown list.

Sets the font size. Enter a value in the Size text box and select a unit of measurement such as em, point, or %. Alternatively, select a predefined value such as XX-Small. Select Inherit to use the same font size as the parent element (for example, the page or panel).

Use relative sizes such as em or a percentage to enable your end users to resize the font size in their Web browsers.

Formats the element's font style.

• makes the font bold.
• makes the font bold and italic.
• makes the font italic.
• None removes existing styles.

Applies decorative effects to the element's text. For example, you could remove the underline that usually appears under hyperlinks, which is a standard CSS rule that's built in to most Web browsers.

• underlines the text.
• applies strikethrough formatting.
• displays a line over the text.
• None removes existing text decoration.

Aligns the text of the selected element.

• aligns the text to the left.
• aligns the text to the right.
• centers the text.
• aligns the text with both the left and right margins.

Changes the capitalization of the element's text.

• capitalizes the first character of each word.
• capitalizes all characters.
• lowercases all characters.
• None removes existing capitalization formatting.

Positions page elements outside the normal flow of the document. Usually, elements on a page are rendered in Web browsers in the order they appear in the document. Block elements such as p tags and div tags appear one beneath the other, whereas inline elements such as em, strong, and span tags are rendered next to text or each other.

• Absolute positions the content using the settings in the Top, Bottom, Left, and Right text boxes.
• Relative renders the page element in the normal layout flow, but moves the element relative to its normal position depending on the values in the Top, Bottom, Left, and Right text boxes. For example, if you set an element's left position to 20 pixels, the page element is positioned 20 pixels further to the left.

Overrides a page element's default layout behavior. For example, you can hide page elements, make block elements render inline, or make inline elements render as blocks.

• None hides the page element.
• Block displays the page element as a block-level page element, with a line break before and after the element.
• Inline, which is the default setting, displays the page element as an inline page element without a line break before or after the element.
• Inline-block renders the page element as an inline rectangle, but with content that behaves as if it's inside a block element.

When used in conjunction with the Absolute or Relative positioning options, these four properties place page elements outside the normal flow of the document. Enter a value in the text boxes as appropriate and select a unit of measurement in the respective dropdown lists.

• Top sets how far the top edge of an element is above or below the top edge of the parent element.
• Bottom determines how far the bottom edge of an element is above or below the bottom edge of the parent element.
• Right sets how far the top edge of an element is to the right or left of the right edge of the parent element.
• Left defines how far the left edge of an element is to the right or left of the left edge of the parent element.

Specifies the order in which elements overlap each other when they must be rendered in the same space. An element with a greater z-index value covers an element with a lower value. The default value is 0.

Click and to increase and decrease the z-index, or enter a value in the text box.

Floats a page element to the left or right so that subsequent elements—text for example—wrap around the floating page element.

• floats the page element to the left.
• floats the page element to the right.
• None removes an existing float setting.

Specifies whether the selected page element allows floating page elements beside it.

• moves the page element below any floating page element on its left.
• moves the page element below any floating page element on its right.
• moves the page element below floating page elements on either side.
• None removes existing float settings.

Specifies whether the selected page element is visible.

• Visible is the default value.
• Hidden hides the page element and renders an invisible rectangle in its place.
• Collapse is used to hide table elements. (For other page elements, it has the same result as hidden.)

  Invisible page elements still occupy the same space in the page's layout.

Specifies whether the content of a page element is clipped when it overflows its area.

• Visible doesn’t clip the content.
• Hidden clips the content.
• Scroll clips the content, but provides scroll bars so that users can view the remaining content.
• Auto is dependent on the browser, but displays a scroll bar to view the rest of the content.

When designing tables:

• Collapse uses a common border between cells
• Separate gives each cell its own border