Understanding the style editor window

The style editor is divided into upper and lower panes. The upper pane contains a series of tabs which are used to access different style settings. The lower section contains a preview pane which is used to preview how content will look when selected style properties are applied, and displays CSS markup:

The style editor window

Style properties are accessed via the following tabs:

Font
Block
Background
Border
Box
Position
Layout
List
Table

All available options on these tabs relate to CSS properties. These options are summarized in the following sections however, for more detailed information you may wish to consult a CSS reference - for example http://www.w3schools.com.

Font properties

Use the font tab to set required font properties for the selected item:

Option	Summary
font-family	Use the drop-down list to select the required font.
font-size	Use the drop-down list to select the required font size (x-small, small, medium, etc.) or select (value) to select a unit (px, pt, mm, in, em, etc.).
font-weight	Use the drop-down list to select the required font weight (normal, bold, lighter, etc.).
font-style	Use the drop-down list to select the required font style (normal, italic, oblique or inherit).
font-variant	Use the drop-down list to select the required font variant (normal, small caps or inherit).
text-transform	Use the drop-down list to select the required transformation (capitalize, lowercase, none uppercase or inherit).
color	Use the drop-down list to select the required color, or type a value into the field.
text-decoration	Use check boxes to select one or more text decoration options.

Where inherit is selected, the item of content will inherit the given attribute from its parent element. For example, if you are setting the font-size for a particular word in a paragraph, the word would inherit its size from the paragraph <p> element.

Block properties

Use the block tab to set required block properties for the selected item. In HTML, elements (i.e. items of content) can be 'block-level' or 'inline'. Typically, block-level elements may contain inline elements and other block-level elements. Inline elements may contain only data and other inline elements. Block-level elements generally start on a new line whilst inline elements do not. Available settings are summarized below:

Option	Summary
line-height	Use the drop-down list to select normal or inherit, or select (value) to select a unit (pt, px, etc.) and enter the required numeric value.
vertical-align	Use the drop-down list to select the required vertical alignment setting (baseline, bottom, middle, inherit, etc.) or select (value) to select a unit (%, pt, px, etc.) and enter the required numeric value.
text-align	Use the drop-down list to select the required text alignment setting (center, justify, left, inherit, etc.).
text-indent	Use the drop-down list to select the required text indent setting. You can choose to inherit settings from the parent element, or select (value) to select a unit (%, pt, px, etc.) and enter the required numeric value.
white-space	Use the drop-down list to determine how white space should be handled (normal, nowrap, pre, pre-line, etc.).
word-spacing	Use the drop-down list to select the required word spacing setting. You can choose normal or to inherit settings from the parent element. Alternatively, or select (value) to select a unit (%, pt, px, etc.) and enter the required numeric value.
letter-spacing	Use the drop-down list to select the required letter spacing setting. You can choose normal or to inherit settings from the parent element. Alternatively, or select (value) to select a unit (%, pt, px, etc.) and enter the required numeric value.

Background properties

Use the background tab to set required background properties for the selected item. Available settings are summarized below:

Option

Summary

background-color

Use the drop-down list to select the required color, or type a value into the field.

background-image

Use the drop-down list to select none or inherit. Alternatively, click the browse button to select an image file from your local / network path.

When deploying OWA signatures, any images used must be web images - not embedded.
When deploying Outlook signatures, either embedded or web images can be used. Any embedded images should reference the local computer - do not use UNC/mapped drives.

background-repeat

Use the drop-down list to select if/how a background image should be repeated (no-repeat, repeat, repeat x, repeat y or inherit).

background-attachment

Use the drop-down list to determine whether a background image is fixed or if it scrolls with the rest of the page.

(x) background-position

Use the drop-down list to set the horizontal start position for a background image. Choose from standard options (normal, center, left, right, inherit) or select (value) to select a unit (%, pt, px, etc.) and enter the required numeric value.

(y) background-position

Use the drop-down list to set the vertical start position for a background image. Choose from standard options (normal, center, left, right, inherit) or select (value) to select a unit (%, pt, px, etc.) and enter the required numeric value.

Border properties

Use the border tab to define a border for the selected item. For each option, you can choose to define individual settings for top, bottom, left and/or right borders, or select the same for all check box to apply the first setting to all borders. Available settings are summarized below:

Option	Summary
border-style	Use the drop-down list to select the required type (dashed, dotted, double, groove, inherit, etc.).
border-width	Use the drop-down list to select the required width (thin, medium, thick, inherit). Alternatively, select (value) to select a unit (%, pt, px, etc.) and enter the required numeric value.
border-color	Use the drop-down list to select the required color, or type a value into the field.

Box properties

In CSS, a 'box' model can be thought of as a box that wraps around HTML elements. It is typically used for design and layout since it allows the placement of a border around elements, and to space elements in relation to other elements. A box is comprised of margins, borders, padding, and actual content, as illustrated below:

Box model reference

Use the box tab to define margin and padding settings for the selected item (see border properties for border settings). For each option, you can choose to define individual settings for top, bottom, left and/or right borders, or select the same for all check box to apply the first setting to all borders. Available settings are summarized below:

Option	Summary
padding	Padding is used to clear an area around the content. Use the drop-down list if you wish to inherit padding from the parent element, or select (value) to select a unit (%, pt, px, etc.) and enter the required numeric value.
margin	Margins are used to clear an area around the border. Use the drop-down list to determine the margin size (auto, inherit) or select (value) to select a unit (%, pt, px, etc.) and enter the required numeric value.

Position properties

Positioning properties are used to position an element. They can be used to place an element in front of or behind another, and to specify what should happen when an element's content is too big.

Here, you select a positioning method and (if required) define positioning using top, bottom, left, and right properties. Note that properties work differently depending on which positioning method is selected. The following positioning methods are available:

Option	Summary
absolute	An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>. Static elements can overlap other elements.
fixed	An element with a fixed position is positioned relative to the browser window - it does not move even if the window is scrolled. Fixed positioned elements can overlap other elements.
static	A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.
inherit	Inherit positioning from the parent element.

The z-index property is used to control the behavior of overlapping elements - i.e. which element should be placed in front of or behind others).

Layout properties

Layout properties are used to determine if and how items are displayed on the page. Available options are summarized below:

Option	Summary
visibility	Use this option to determine the visibility of an item. Choose from collapse (typically for table elements), hidden, visible or inherit. Note that if an item is hidden, its space on the page is still allocated.
display	Choose from a range of display options (block, inline, none, inherit, etc.). Note that if display is set to none, its space on the page is removed (i.e. there is no indication that the item was ever there).
float	Float properties are used to push an element to the left or right, allowing other elements to wrap around it. This technique is often used for images, but it is also useful when working with layouts. Use the drop-down list to select left, none, right or inherit.
overflow	The overflow property determines what happens if content overflows an element's box. Use the drop-down list to select auto, hidden, scroll, visible or inherit.
clip [top / right / bottom / left]	Clip options are used to handle cases where an image is larger than its containing element. The clip property allows you to specify the dimensions of an element so the element is clipped to this size when required. Use the drop-down list to select auto or inherit. Alternatively, select (value) to select a unit (%, pt, px, etc.) and enter the required numeric value.

List properties

List properties are used to determine how a table is displayed. Available options are summarized below:

Option	Summary
list-style-type	This property is used to specify the type of list-item marker in a list. Choose from a range of types including disc, circle, square, inherit, etc.
list-style-image	Use the drop-down list to select none or inherit. Alternatively, use the browse button to select your own image to be used as the marker in lists.
list-style-position	Use this property to specify whether list-item markers should appear inside or outside the content flow. Choose from inside, outside or inherit.

Table properties

Table properties are used to determine how a table is displayed. Available options are summarized below:

Option	Summary
table-layout	Select auto to adopt an automatic layout, where the column width is set by the widest unbreakable content in the cells. Alternatively, select fixed, where the horizontal layout depends upon the table's width and the width of the columns, rather than the content of the cells. You can also choose inherit, to inherit behavior of the parent element.
border-collapse	Choose whether table borders are collapsed into a single border, or detached. Select collapse to collapse borders into a single border (border-spacing and empty-cells properties are ignored). Alternatively, select separate to display detached borders (border-spacing and empty-cells properties are not be ignored). You can also choose inherit, to inherit behavior of the parent element.
empty-cells	Use this property to determine whether or not to display borders and background for empty cells in a table (only when separated borders are selected). Choose from hide, show or inherit.
caption-side	This property is used to specify the placement of a table caption - choose from bottom, top or inherit.