New Style and Modify Style Dialog Boxes, 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
Open the page in either Design view or Source view.
Optionally, select the text and/or HTML elements to apply the style to.
In the Format menu, click New Style.
The New Style dialog box is displayed.
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
Open an existing external style sheet.
Put the cursor inside the braces of the style rule to be modified.
Do one of the following.
Right-click the style sheet in the editor, and then from the shortcut menu, choose Build Style.
In the Style Sheet Toolbar, choose Build Style.
The Modify Style dialog box is displayed.
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.
UIElement List
The following tables list options that are available under the Layout category in the New Style and Modify Style dialog boxes.
Layout Options
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.
Other UI Elements
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.