Style sheets dialog

The Stylesheet editor dialog is used to edit CSS style sheet resources. For information on the use of style sheets, see Styling and formatting and Styling templates with CSS files.

This dialog lets you edit the Global style sheet (context_all_styles.css, which by default applies to all contexts), and the style sheet that applies to the context that is currently being edited in the workspace: Print (context_print_style.css), Email (context_email_style.css) or Web (context_web_style.css).

To open this dialog, select Edit > Stylesheets....

  • Context: Use the drop-down to select Global (all contexts) or the context that is open in the workspace, such as Print. Selecting a context shows all it's CSS rules in the Rule List.
  • Show: Use the drop-down to select whether to show all CSS rules or limit to certain types: Class, ID or Element rules.
  • Rule List: Displays the list of rules in the currently selected style sheet.
  • Rule Display: Displays the contents of the currently selected rule in the Rule List.
  • New: Click to create a new rule with the Edit Rule dialog. See New/Edit Rule dialog.
  • Edit: Click to edit the currently selected rule in the Rule List using the Edit Rule dialog. See New/Edit Rule dialog.
  • Delete: Click to delete the currently selected rule in the Rule List.
  • Duplicate: Click to create a duplicate of the currently selected rule in the Rule List using the Edit Rule dialog. The default name for the new rule is the name of the current one plus "-duplicated". See New/Edit Rule dialog.
  • Move Up: Move the currently selected rule in the Rule List up one position in the list.
  • Move Down: Move the currently selected rule in the Rule List down one position in the list.
  • Save: Click to save all changes to the style sheet and close the dialog.
  • Cancel: Click to close the dialog without saving any changes.

New/Edit Rule dialog

The New/Edit Rule dialog shows the properties for a specific CSS selector.
Click the Apply button to see how a setting affects the elements that are subject to that selector. (You may have to move and resize the Stylesheet dialog before opening the Edit Rule dialog, in order to be able to see the template that you are working on.)
At any point you can click on the Advanced button to see the Advanced Stylesheet Rule. See Advanced Stylesheet Rule.

  • Name: The CSS Selector to which this rule applies. This can be a selector that is specific to Connect (see Selectors in Connect) or any selector used in regular CSS, since they can also be used here (see CSS Selectors on W3Schools for a simple reference page).

Type Tab

  • General group:
    • Font: Select the font used to display text. See also: Fonts. This is equivalent to the CSS font-family property.
    • Size: Enter the size in a measure, named size or percentage. This is equivalent to the CSS font-size property.
    • Color: This is the color of the text. Select a named font color as defined in the Edit Colors dialog (see Colors) or click the colored square to create a new color or to enter a color manually. The color value must be a valid HTML color name or hexadecimal color code. This is equivalent to the CSS color property.
    • Background Color: This is the background color of the text. Select a named font color as defined in the Edit Colors dialog (see Colors) or click the colored square to create a new color or to manually enter a color value (a valid HTML color name or hexadecimal color code). This is equivalent to the CSS background-color property.
  • Spacing group:
    • Letter Spacing: Set the space between characters in a text in measure or percentage. This is equivalent to the CSS letter-spacing property.
    • Word Spacing: Set the space between each word in a text in measure or percentage. This is equivalent to the CSS word-spacing property.
    • Whitespace: Specify how to handle white spaces inside of an element. See CSS White-Space for details. This is equivalent to the CSS white-space property.
  • Style group: Check any option to apply the selected style to text within the element. This list shows the CSS property and value for each of the options.
    • Bold: Sets the font-weight to 700.
    • Italic: Sets font-style to italic.
    • Underline: Sets text-decoration to underline.
    • Strikethrough: Sets text-decoration to line-through.
    • Subscript: Sets vertical-align to super.
    • Superscript: Sets vertical-align to sub.
    • Capitalize: Sets text-transform to capitalize.
    • Uppercase: Sets text-transform to uppercase.
    • Lowercase: Sets text-transform to lowercase.
    • Small-caps: Sets font-variant to small-caps.

Formats Tab

  • General group:
    • Line-height: Specify the height of each line in the element's text, in measure or percentage. Note that this is not spacing between lines, but rather the complete height of the line itself including the text. Equivalent to the line-height property.
    • Align: Select how text should be aligned, such as left, center, right or justify. Equivalent to the align property.
    • First Indent: Specify the indentation of the first line of each paragraph in the element. Equivalent to the text-indent property.
    • Display: Select how to display the element. This can also be used to hide an element completely using the none option. See CSS Display. Equivalent to the display property.
  • Breaks group:
    • Before: Specifies whether a page break should occur before the element. Equivalent to the page-break-before property.
    • Inside: Specifies whether to accept page breaks within the element. Equivalent to the page-break-inside property.
    • After: Specifies whether a page break should occur after the element. Equivalent to the page-break-after property.
    • Widows: Specifies how to handle widows within a paragraph (lines appearing alone on the next page if the paragraph does not fit on the current one). Equivalent to the widows property. Widows and orphans are ignored if the page-break-inside property is set to avoid.
    • Orphans: Specifies how to handle orphans within a paragraph (lines appearing alone at the end of a page if the paragraph does not fit on the current one). Equivalent to the orphans property.

Spacing Tab

See also: Spacing.

  • Padding group: Defines padding (spacing inside the element) in measure or percentage:
    • All sides: Check to set all padding to use the Top value. Equivalent to the border property.
    • Top, Left, Bottom, Right: Set padding for each side. Equivalent to the border-left, border-top, border-right and border-bottom properties.
  • Margin group: Defines margins (spacing outside the element) in measure or percentage:
    • All sides: Check to set all margins to use the Top value. Equivalent to the margin property.
    • Top, Left, Bottom, Right: Set the margin for each side. Equivalent to the margin-left, margin-top, margin-right and margin-bottom properties.

Border Tab

See also: Border.

  • Same for all sides: Defines the border properties for all sides using the Top properties. Equivalent to theborderproperty.
  • Top, Left, Bottom, Right: Each group defines the following properties:
    • Width: Specify the thickness of the border. Equivalent to the border-width property.
    • Style: Specify the style of the border such as solid, dashed or dotted. Equivalent to the border-style property.
    • Color: Specify the color of the border. The color value must be a valid HTML Color Name, or a valid HTML Hex Color. Equivalent to the border-color property.

Advanced Stylesheet Rule

The Advanced editor is used to manually input rules. Note that to use this dialog, basic knowledge of CSS rules is a pre-requisite, as no check is currently done to verify that properties and values are correct.

  • Property List: Lists all the currently available properties for the selector.

    • Property: The name of the property. This must correspond exactly to a known property (see CSS Reference). An autocompletion drop-down displays to show possible values when typing.
    • Value: The value for the given property. The values must be valid for that property, see the CSS Reference link above and check the property for valid values.
  • New: Click to create a new line and type in the property.
  • Delete: Click to delete the currently selected property in the Property List.
  • Move Up: Move the currently selected property in the Property List up one position in the list.
  • Move Down: Move the currently selected property in the Property List down one position in the list.