This documentation is archived and is not being maintained.

New Style Dialog Box, Layout

The Layout category of the New Style and Modify Style dialog box enables you to define cascading style sheet (CSS) style rules for the layout of UI elements on a Web page. You can apply these style rules directly to HTML elements or add them either to the current page or to an external style sheet.

To define a CSS layout style rule for UI elements on the current page

  1. Open the page in either Design view or Source view.

  2. Optionally, select the text and/or HTML elements to apply the style to.

  3. In the Format menu, click New Style.

    The New Style dialog box is displayed.

  4. In the Category pane, select Layout.

    The layout style selections are displayed in the right pane.

When you apply styles to selected text in Design view, style attributes are inserted inline into the HTML markup for the page. Switch to Source view to review the new style attributes.

To add layout attributes to a CSS style rule defined in an external style sheet

  1. Open an existing external style sheet.

  2. Put the cursor inside the braces of the style rule to be modified.

  3. In the Styles menu, click Build Style.

    The Modify Style dialog box is displayed.

    NoteNote:

    The Styles menu appears when you open an external CSS style sheet for editing. On the Styles menu, the Build Style option becomes available when you put the cursor inside the braces that follow the selector for a style rule.

  4. In the left pane, click Layout.

    The layout style selections appear in the right pane.

You can apply a CSS style class to an element in the Web page or to the body element itself by setting the element's class property to the name of the class selector.

The following tables list options that are available under the Layout category in the New Style and Modify Style dialog boxes.

visibility

Whether an element is visible or hidden. Values are as follows:

  • collapse   When used with table elements, this value hides a row or a column. For all other elements, this value means the same as hidden.

  • hidden   Makes the element invisible.

  • visible   Makes the element visible.

  • inherit   The element inherits its visibility property from a parent element.

display

How an element is displayed. Values are as follows:

  • block   The element will be displayed at block level with line breaks before and after it.

  • inline   The element will be displayed inline with no line breaks before or after it.

  • inline-box   The element will be displayed inline as a box with no line breaks before or after the box.

  • inline-table   The element will be displayed inline as a table with no line breaks before or after the table.

  • list-item   The element will be displayed as an item in a list.

  • none   The element will be hidden.

  • run-in   The element will be displayed either at block level or inline, depending on the context.

  • table   The element will be displayed as a block table with a line break before and after the table.

  • table-caption   The element will be displayed as a table caption.

  • table-cell   The element will be displayed as a table cell.

  • table-column   The element will be displayed as a table column.

  • table-column-group   The element will be displayed as a group of table columns. This group might contain one or more columns.

  • table-footer-group   The element will be displayed as a group of table footers. This group might contain one or more footers.

  • table-header-group   The element will be displayed as a group of table headers. This group might contain one or more headers.

  • table-row   The element will be display as a table row.

  • table-row-group   The element will be displayed as a group of table rows. This group might contain one or more rows.

  • inherit   The element inherits its display property from a parent element.

float

Whether an element will float to the left or right, enabling text to wrap around it, or be displayed inline. This property is most often used with images, but it applies to text blocks as well. Values are as follows:

  • left   The element floats to the left, inside the parent element.

  • none   The element is displayed inline where it appears in the text.

  • right   The element floats to the right, inside the parent element.

  • inherit   The element inherits its float property value from a parent element.

clear

Which sides of an element disallow floating elements. Values are as follows:

  • both   The element disallows floating elements on its left or right side.

  • left   The element moves below a floating element that is on its left side.

  • none   The element allows floating elements on all sides.

  • right   The element moves below a floating element that is on its right side.

  • inherit   The element inherits its clear property from a parent element.

cursor

What type of cursor to display. Values are as follows:

  • auto (default)   The browser sets the cursor.

  • crosshair   The cursor is rendered as a crosshair.

  • default   The default cursor (often an arrow).

  • e-resize   The cursor used for resizing an element to the right (east).

  • help   The cursor that indicates that help is available (often a question mark).

  • move   The cursor that indicates an object can be moved.

  • n-resize   The cursor used for resizing an element to the upward (north).

  • ne-resize   The cursor used for resizing an element to the up and right (northeast).

  • nw-resize   The cursor used for resizing an element to the up and left (northwest).

  • pointer   The cursor is rendered as a pointer (often a hand).

  • progress   The cursor that indicates the program is making progress.

  • s-resize   The cursor used for resizing an element to the downward (south).

  • se-resize   The cursor used for resizing an element to the down and right (southeast).

  • sw-resize   The cursor used for resizing an element to the down and left (southwest).

  • text   The cursor used for text.

  • w-resize   The cursor used for resizing an element to the left (west).

  • wait   The cursor that indicates the program is busy (often an hourglass).

  • inherit   The element inherits its cursor property from a parent element.

overflow

What happens when the content of an element overflows its area. Values are as follows:

  • auto   Scroll bars are displayed only if the content is clipped.

  • hidden   The content is clipped to fit the element and no scroll bar is displayed.

  • scroll   The content is clipped to fit the element and a scroll bar is displayed.

  • visible (default)   The content is displayed even if it is outside the element.

  • inherit   The element inherits its overflow property from a parent element.

clip

The rectangular dimensions of an element. If the element is larger than the defined area, it will be clipped to fit the area. To specify the dimensions, use the top, right, bottom, and left boxes.

top

The top edge of the clip rectangle. If you specify a value, you can select units in the list.

right

The right edge of the clip rectangle. If you specify a value, you can select units in the list.

bottom

The bottom edge of the clip rectangle. If you specify a value, you can select units in the list.

left

The left edge of the clip rectangle. If you specify a value, you can select units in the list.

Selector

(New Style dialog box only) Enables you to type a class name or click an HTML element to apply the style to. Class names must begin with a period (.). You can also select (inline style), which causes the style to be applied inline to the selected text or HTML elements.

Define in

(New Style dialog box only) Enables you to specify where to write the definition of the style rule. Values are as follows:

  • Current page   The style rule is written to a style element in the current page.

  • New style sheet   A new CSS style sheet is added to the project and the rule is written in it.

  • Existing style sheet   The style rule is added to the CSS style sheet that you specify by using the URL list.

URL

(New Style dialog box only) Enables you to select an existing CSS style sheet. This option is enabled only when Define in is set to Existing style sheet.

Apply new style to document selection

(New Style dialog box only) Specifies that the style is applied to the selected text, class, or HTML element.

Preview

Displays an example of how the style rule will appear when it is applied.

Description

Shows the CSS definition of the style rule.

Show: