HelpStudio 2022
Design the Content / Stylesheet Editor
In This Topic
    Stylesheet Editor
    In This Topic

    The Stylesheet Editor allows you to create, edit, and delete the Style Rules within CSS files and validate a stylesheet against the CSS 2.1 specification.

    Create a new Style

    1. To open the Stylesheet Editor, double-click on the CSS file in the Project Explorer, or
      Right-click on the CSS file in the Project Explorer and select Edit.
    2. Click the Add a new Style rule button.
    3. Enter a name for the new Style Rule.

      The New Style dialog allows you to create a Style of the following types:

      • Named Style Rule: A named style that can be applied to multiple HTML elements.
      • Element Type Style Rule: A style that is applied automatically to all HTML elements of the type selected.
      • ID Style Rule: A style that will be applied to a single HTML element with a matching ID attribute.
    4. Select OK button.

    Edit an existing Style

    Select the Style in the Style tree and edit its properties in the Visual Style Editor.

    To change the Style Property Captions type that are displayed in the Visual Style Editor:

    1. On the Tools tab, select Options.
    2. Select General under Authoring.
    3. In the Style Editing, select the required caption in the Style Property Captions dropdown.

    - or -

    Edit the Style's CSS directly in the CSS Source.

    Delete an existing Style

    Select the Style in the Style tree and click the Delete  toolbar button.

    - or -

    Select the Style in the Style tree and press Ctrl+Delete.

    - or -

    Delete the Style's CSS directly from the CSS Source.

    Validate a Stylesheet

    1. Click the Validate Stylesheet  toolbar button.
      After validation is completed, the Validation Status in the status bar at the bottom of the Stylesheet Editor is updated.

    Any errors or warnings found are highlighted with an error  or warning   icon in the Source view margin next to the relevant line. An error or warning icon is also displayed next to the Style in the Style tree.

    You can mouse over these icons to display information on the error or warning. They can also be clicked to be marked as "edited" and appear as a green icon .

    See Also