Stylesheet Editor

The Stylesheet Editor displays when you open a stylesheet file from the Content Explorer, and is used to modify styles contained in regular stylesheets. For special table stylesheets, you will use the Table Style Editor (see Table Stylesheets). However, you can also use the Stylesheet Editor to modify standard table tags (e.g., th, td) that are contained within a regular stylesheet.

See Styles and Stylesheets and Editing Styles in a Regular Stylesheet.

How to Open the Editor

  1. Open the Content Explorer.
  2. Locate and double-click a stylesheet (CSS) file.

    If you used the default location when you added the stylesheet to the project, the stylesheet is located in the Resources > Stylesheets subfolder of the Content Explorer.

    If you imported the stylesheet from another authoring tool, the stylesheet is located in the same subfolder (if any) where it was stored in the source project, or at the root level of the Content Explorer.

Two Views

There are two views available in the Stylesheet Editor: Simplified and Advanced. You can toggle between these two views by clicking or in the local toolbar of the editor.

  • Simplified The Simplified view displays styles in a grid view and is often best for brand new users.

    This view provides an easy way to apply properties to styles, with format options available from a toolbar and dialogs (similar to the way one would use an interface such as Microsoft Word). In some cases, only the most common property options are available in the Simplified view (e.g., font, letter/word spacing, paragraph alignment/indentation, autonumbering format, borders, background). One advantage of the Simplified view is that you can apply a property to multiple styles at the same time. You can also click a check box to hide the properties in the editor, allowing you to see only the styles.

  • Advanced The Advanced view displays styles in a tree structure, and despite the name, is user friendly for authors of all levels.

    For the properties, you can toggle between a grouped display and an alphabetical display. The Advanced view of the Stylesheet Editor lets you edit more settings than are available in the Simplified view. In addition, the Advanced view lets you see and apply settings to multiple mediums and media queries at the same time.

What You Can Do in the Stylesheet Editor

Following are some of the primary tasks that you can perform in this editor:

  • Comments (Add) If you are familiar with using cascading stylesheets (CSS) in a text editor, you probably already know that you can add comments to styles. This is simply a way to remind you or others about information related to a style (e.g., which situations are appropriate to use a certain style). In Flare you can add, edit, and view these style comments through the user interface. See Adding Comments to Styles.
  • CSS Variables (Create/Insert/Edit) A CSS variable lets you place the value for a style in one place and reuse it throughout a stylesheet. As with other kinds of single-sourcing, this can help with speed, ease of use, and consistency. Whenever you want to change the value, you only need to do so in one place and the new value is propagated everywhere that the variable is referenced. You certainly could use the "find and replace" feature instead to change the value, but CSS variables are preferred because you won’t need to worry about inconsistencies in your stylesheet. For example, some values—such as colors—can be written in various ways, so in those cases CSS variables make a lot of sense. See CSS Variables, Creating CSS Variables, Inserting CSS Variables, and Editing CSS Variables.
  • Font Sets (Manage) A font set is a collection of font families. You can create a font set in order to designate the substitute fonts to use when the preferred font is not available on the user's computer. If the first (i.e., preferred) font family in the set is not found on the user's computer, the second font family in the set is used. If the second font family is not found, the third font family is used, and so on. See Creating Font Sets, Editing Font Sets, and Deleting Font Sets.
  • Media Queries (Create) A media query is an alternative group of settings in a stylesheet. These settings are automatically used under certain conditions, such as when a screen of a certain size is displaying the output. Media queries are able to do this because they are configured with specific criteria (e.g., maximum width of the screen, orientation, resolution). When the criteria are met, the style settings in the media query are used to display the output. You do not tell a Flare target to use a media query; it just happens automatically. See Creating Media Queries.
  • Mediums (Create) A medium is an alternative group of settings in a stylesheet and can be very useful when you are generating multiple kinds of outputs. Unless you tell Flare otherwise, default style settings will be used for the different outputs you generate. But there may be times when you want to override a default style setting for a particular output; that's why you would use a medium. You need to explicitly tell Flare which medium you want a particular target to use. This is done from the Advanced tab of the Stylesheet Editor. See Creating Mediums.
  • Selectors (Create) A selector is a way to associate XHTML content with style settings based on various information—most often its type, class, or ID. Sometimes the word "selector" is used interchangeably with the term "style," but a selector can be much more than just a simple style. When you create a new stylesheet, it already has many selectors in it. If necessary, you can create new selectors of varying levels of complexity. See Creating Selectors.
  • Selectors (Rename) You can rename a selector (e.g., class, ID) after you have created it. However, you cannot rename existing parent styles, such as p, h1, or span. When you rename a style class or ID, you have the option to automatically rename all instances of that class or ID in the stylesheet accordingly. See Renaming Selectors.
  • Style Property Values (Cut, Copy, Paste) In both the Stylesheet Editor and Formatting window pane, you can display properties in alphabetical view, as opposed to grouped view. When you are in alphabetical view, you can select multiple properties for a particular selector. Then you can cut/copy and paste these properties into another selector; they can also be pasted in the Stylesheet Editor or in a text-based editor, such as Notepad or the Internal Text Editor. Declarations can also be copied from a separate CSS document and into your stylesheet in Flare. See Cutting, Copying, and Pasting Style Property Values.
  • Style Property Values (Delete) In addition to copy, cut, and paste, you can delete the values for those properties from the current selector. See Deleting Style Property Values.
  • Styles (Disable) You can prevent certain styles from being shown in the Stylesheet Editor and in the Flare interface. This is a good feature if you use only some of the styles provided in a stylesheet. Rather than being overwhelmed with the sight of all styles in the stylesheet, you can ensure that you see only the styles that you tend to use in your project. Those styles will not be removed from the stylesheet; they will simply be hidden until you enable them. See Disabling and Hiding Styles.
  • Styles (Edit) After you create a new regular stylesheet, you can edit the styles within it. See Editing Styles in a Regular Stylesheet.
  • Styles (Import) You can manually create new style classes in a stylesheet. Another option is to import existing styles from another stylesheet. See Importing Styles.
  • Stylesheets (Link) If you have more than one stylesheet in your project, you can link them together. By doing this, one stylesheet can adopt the styles of the other stylesheet so that they can be used in content files where that stylesheet is applied. See Linking Stylesheets.

Inheritance—Why Some Styles are Gray

When making changes to styles in the Advanced view of the Stylesheet Editor, you may notice that some styles are gray. These are called "inherited" styles. That's because they do not yet have explicit settings on them, so they are inheriting default values from somewhere else (e.g., a factory stylesheet located where you installed the application). As soon as you make a change to one of these styles, it ceases to be an inherited style (or at least the property you set is no longer inheriting from the default value), and the style name turns from gray to a darker font. You can click Hide Inherited in the local toolbar if you want to hide these inherited styles.

Also, if you hover over an inherited style, Flare displays the path to the stylesheet from which the style is inherited.

If you have created a link from one stylesheet to another, you can double-click on an inherited property to open that other stylesheet.

For more information, see Inheritance.

Example  

Let's say you have two stylesheets in your project—one called "Main-Styles" and the other "Styles-for-Home-Page." You decide to create a link between the two stylesheets, so you open Main-Styles.css, select the Options drop-down in the Stylesheet Editor, and choose Stylesheet Links.

In the Stylesheet Links dialog, you move Styles-for-Home-Page.css from the left to the right side.

Back in the Main-Styles.css file, you notice that the color property is inheriting a setting. This is indicated by the gray text. If you hover over this property, you can see that the color is coming from the Styles-for-Home-Page.css stylesheet.

If you open the Styles-for-Home-Page.css stylesheet and select that same style, you will notice that the text for the color property is darker, meaning it is the source of that setting.

Local Toolbar

Button/Section

Description

Toggles between an Advanced view and a Simplified view of the Stylesheet Editor.

Opens the New Selector dialog opens, which lets you create a new selectors of varying levels of complexity. See Creating Selectors.

A selector is a way to associate XHTML content with style settings based on various information—most often its type, class, or ID. Sometimes the word "selector" is used interchangeably with the term "style," but a selector can be much more than just a simple style.

Lets you rename a selector (e.g., class, ID). See Renaming Selectors.

Opens a menu, which lets you add a new CSS variable or insert an existing one into a property. See CSS Variables, Creating CSS Variables, and Inserting CSS Variables.

Opens a menu, which lets you add a new medium or media query. You can also delete the custom medium or media query that is active in the Stylesheet Editor. See Mediums and Media Queries, Creating Mediums, and Creating Media Queries.

Opens a submenu that lets you select from the following options:

  • Import Styles Opens the Import Styles dialog, which lets you import individual styles from another stylesheet to the current one. You can import from one of Flare's factory stylesheets or any other CSS file that you have access to. See Importing Styles.
  • Manage Font Sets Opens the Font Set Manager, which lets you add, edit, and delete a font set. See Creating Font Sets, Editing Font Sets, and Deleting Font Sets.
  • Stylesheet Links Opens the Stylesheet Links dialog, which lets you link another stylesheet to the current stylesheet. The style classes within the linked stylesheet are therefore copied into the current stylesheet. See Linking Stylesheets.
  • Disable Styles Opens the Disable Styles dialog, which lets you prevent certain styles from being shown in the Stylesheet Editor and in the Flare interface. This is a good feature if you use only some of the styles provided in a stylesheet. Rather than being overwhelmed with the sight of all styles in the stylesheet, you can ensure that you see only the styles that you tend to use in your project. Those styles will not be removed from the stylesheet; they will simply be hidden until you enable them. See Disabling and Hiding Styles.

Advanced View

Button/Section

Description

[Styles]

You can use this field to filter which types of styles to show in the area below.

  • All Styles This lists all of the styles in the Stylesheet Editor.
  • Autonumbered Styles These are styles to which an autonumber format has been applied. See Autonumbers.

    Example  

    You might select the h1 style and modify its mc-autonumber-format property, choosing a format such as {n+}. If you then select Auto-numbered Styles from this drop-down in the Stylesheet Editor, the h1 style will be listed.

  • Topic Styles This lists the html style and its classes, which are used to affect entire topics. You might associate a style class with a topic if you are generating DITA output and need to specify a topic type such as "task" or "reference" on it. See Setting the HTML Style for Topics.
  • Paragraph Styles These are styles applied to an entire paragraph.

    Example  

    You might select a style class called "p.Body" that you have created and modify its font-size property to enlarge the body text in your topics.

  • Footnote Styles These are styles that are applied to footnotes inserted into content. Footnotes are commonly used if you are producing print-based output. The MadCap|footnotesBlock style affects the area that holds a collection of footnotes. See Footnotes and Endnotes.

    Example  

    You might select the MadCap|footnote style and modify its mc-footnote-number property in order to restart the numbering for footnotes at each chapter (as opposed to each book, page, or section). You might select the MadCap|footnotesBlock style and modify its border property in order to add a border above the footnote area on the page.

  • Heading Styles These are styles that are applied to content intended to serve as headings above sections of content.

    Example  

    You might select the h2 style and modify its font-family property in order to display second-level headings in an Arial font.

  • Character Styles These are styles that are applied to selected text within a paragraph, rather than the entire paragraph.

    Example  

    You might select the span style and create a class under it named "code" (span.code). Then you might set its font-family property to Courier New in order to display text that represents programming code.

  • Table Styles These are styles that are applied to tables and the content within them. See Editing Table Styles in Regular Stylesheets.

    Example  

    You might select the th style and modify its color property in order to display the table header row text in green.

    Note These styles are not to be confused with the separate special table stylesheets that you can create. However, you can use both table stylesheets and these standard table styles from a regular stylesheet in order to design the look of your tables and their content.

    Warning When controlling the look of tables, you might want to choose just one method for styling them. You should use either (A) table stylesheets and perhaps classes of the p style (e.g., p.TableText) for table content (see Selecting Styles for Table Cell Contents), or (B) standard table styles from a regular stylesheet.

    If you use standard table tags at the parent level (e.g., tr, td), you may run into trouble if you also use proxies in your project. The reason for this is that when proxies are generated, they also use standard parent-level table styles. So any style changes you make to the standard table styles may be seen not only in tables, but also in generated content created via proxies (e.g., TOCs, indexes). In this case, it would be wiser to use classes of the standard table styles (e.g., tr.myclass, td.myclass), instead of table styles at the parent level. However, if you decide to use classes of standard table styles (e.g., tr.myclass, td.myclass), you may be faced with a different dilemma. This issue occurs when you also use table stylesheets. That's because the table stylesheet settings will overwrite settings on the classes.

  • List Styles These are styles applied to bulleted or numbered lists. See Lists.

    Example  

    You might select the ul style and create a class under it named "indented." Then you might set its margin-left property to 15px so that bulleted lists using that style are indented 15 pixels from the left edge.

  • Link Styles These are styles that are applied to content that contains a link, such as a cross-reference or a related topics link. See Links.

    Example  

    You might select the MadCap|xref style and modify its mc-format property to change the text displayed in cross-references (e.g., "see page…").

  • Image Styles These are styles applied to images and objects that you inserted into topics. See Images.

    Example  

    You might create a class under the img style, name it "Thumbnail" (img.Thumbnail), and modify its mc-thumbnail property. This lets you specify that images using that tag should be shown as small thumbnails until the end user either clicks or hovers over the thumbnail to see the large version.

  • Dynamic Effects Styles These are styles that are applied to content used in Dynamic HTML effects, such as drop-down text or popups.

    Example  

    You might select the MadCap|dropDown style and modify its mc-open-image and mc-closed-image properties in order to change or remove the image, such as an arrow, displayed next to drop-down effects.

  • Reusable Content Styles These are styles that are applied to reusable content, such as snippets, variables, or proxies.

    Example  

    You might select the MadCap|breadcrumbsProxy style and modify its border-bottom property. This lets you set the color and width of the bottom border for the "You are here" breadcrumbs feature that can be displayed at the top of topics.

  • Generated Content Styles These are styles that are applied to content that is created when you generate output, such as glossaries, indexes, or tables of contents (TOCs).

    Example  

    You might select the TOC1 class under the p style (p.TOC1) and modify its mc-leader-format property. This lets you set the leader format, such as dots, to be displayed after the first-level headings in the generated TOC for print-based output.

  • Controls/Form Styles These are styles that are applied to content within controls, such as buttons, or forms.

    Example  

    You might select the form style and modify its text-align property in order to center a form that you add in a topic.

Hide Inherited

Hides the inherited styles from the list below in the editor. These are styles that do not yet have explicit settings on them, so they are inheriting default values from a stylesheet located elsewhere (e.g., a factory stylesheet stored in the place where you installed Flare). As soon as you make a change to one of these styles, it ceases to be an inherited style (or at least the property you set is no longer inheriting from the default value). In the Advanced view of the Stylesheet Editor, inherited styles are gray; non-inherited styles are black. In addition, there are a couple of factory media queries (tablet and mobile), which are inherited. If you have not yet edited these media queries, they will not show up in the Medium drop-down field in the local toolbar if you have this option set to hide inherited. See Inheritance.

Toggles between showing the properties in grouped view or alphabetical view.

If you are using the grouped view, this expands all of the property groups.

If you are using the grouped view, this collapse all of the property groups.

Medium: [Name of Medium]

You can use this field to select a medium or media query, which opens it in the editor so you can edit it. This includes factory mediums and media queries, as well as those that you may have created. If you have "Hide Inherited" enabled, the factory mediums and media queries will not show up in the drop-down if you have not yet made any edits to them. In the Advanced view of the editor, you can have multiple mediums or media queries open at the same time.The default medium is always placed on the left of the others. See Mediums and Media Queries.

Show: [Properties]

You can use this field to filter the style properties that are displayed.

  • Set (Locally) Properties Displays properties that have been set explicitly in the stylesheet. An "Add Property" field is also shown at the top of the properties. You can use this field to quickly add another property to the list so you can edit it.
  • Set Properties Displays properties that have been set explicitly in the stylesheet. It will also show properties that have been set in an imported stylesheet or inherited properties that have been set in a factory stylesheet. An "Add Property" field is also shown at the top of the properties. You can use this field to quickly add another property to the list so you can edit it.

  • Assorted Relevant Properties Displays the properties that are used most often for the selected style type.
  • All Properties Displays all available properties.

[Styles]

Lists the styles. After you select a style on the left, you can edit its properties on the right.

[Properties]

Lists the properties relevant to the style that is selected to the left. If the properties are displayed in group view, expand the group to see the actual properties. The property name is displayed on the left. Click on the right and use the options to specify the value settings for the property. Depending on the property, you might set the value by typing an entry, selecting an option from a drop-down list, or specifying settings in a small popup.

Comments

You can select the style and then type a comment in the field at the bottom of the Styles section. See Adding Comments to Styles.

[Preview]

As you make changes to a property's values, you can see how the changes look in the Preview section at the bottom of the editor.

Simplified View

Button/Section

Description

[Styles]

You can use this field to filter which types of styles to show in the area below.

  • All Styles This lists all of the styles in the Stylesheet Editor.
  • Autonumbered Styles These are styles to which an autonumber format has been applied. See Autonumbers.

    Example  

    You might select the h1 style and modify its mc-autonumber-format property, choosing a format such as {n+}. If you then select Auto-numbered Styles from this drop-down in the Stylesheet Editor, the h1 style will be listed.

  • Topic Styles This lists the html style and its classes, which are used to affect entire topics. You might associate a style class with a topic if you are generating DITA output and need to specify a topic type such as "task" or "reference" on it. See Setting the HTML Style for Topics.
  • Paragraph Styles These are styles applied to an entire paragraph.

    Example  

    You might select a style class called "p.Body" that you have created and modify its font-size property to enlarge the body text in your topics.

  • Footnote Styles These are styles that are applied to footnotes inserted into content. Footnotes are commonly used if you are producing print-based output. The MadCap|footnotesBlock style affects the area that holds a collection of footnotes. See Footnotes and Endnotes.

    Example  

    You might select the MadCap|footnote style and modify its mc-footnote-number property in order to restart the numbering for footnotes at each chapter (as opposed to each book, page, or section). You might select the MadCap|footnotesBlock style and modify its border property in order to add a border above the footnote area on the page.

  • Heading Styles These are styles that are applied to content intended to serve as headings above sections of content.

    Example  

    You might select the h2 style and modify its font-family property in order to display second-level headings in an Arial font.

  • Character Styles These are styles that are applied to selected text within a paragraph, rather than the entire paragraph.

    Example  

    You might select the span style and create a class under it named "code" (span.code). Then you might set its font-family property to Courier New in order to display text that represents programming code.

  • Table Styles These are styles that are applied to tables and the content within them. See Editing Table Styles in Regular Stylesheets.

    Example  

    You might select the th style and modify its color property in order to display the table header row text in green.

    Note These styles are not to be confused with the separate special table stylesheets that you can create. However, you can use both table stylesheets and these standard table styles from a regular stylesheet in order to design the look of your tables and their content.

    Warning When controlling the look of tables, you might want to choose just one method for styling them. You should use either (A) table stylesheets and perhaps classes of the p style (e.g., p.TableText) for table content (see Selecting Styles for Table Cell Contents), or (B) standard table styles from a regular stylesheet.

    If you use standard table tags at the parent level (e.g., tr, td), you may run into trouble if you also use proxies in your project. The reason for this is that when proxies are generated, they also use standard parent-level table styles. So any style changes you make to the standard table styles may be seen not only in tables, but also in generated content created via proxies (e.g., TOCs, indexes). In this case, it would be wiser to use classes of the standard table styles (e.g., tr.myclass, td.myclass), instead of table styles at the parent level. However, if you decide to use classes of standard table styles (e.g., tr.myclass, td.myclass), you may be faced with a different dilemma. This issue occurs when you also use table stylesheets. That's because the table stylesheet settings will overwrite settings on the classes.

  • List Styles These are styles applied to bulleted or numbered lists. See Lists.

    Example  

    You might select the ul style and create a class under it named "indented." Then you might set its margin-left property to 15px so that bulleted lists using that style are indented 15 pixels from the left edge.

  • Link Styles These are styles that are applied to content that contains a link, such as a cross-reference or a related topics link. See Links.

    Example  

    You might select the MadCap|xref style and modify its mc-format property to change the text displayed in cross-references (e.g., "see page…").

  • Image Styles These are styles applied to images and objects that you inserted into topics. See Images.

    Example  

    You might create a class under the img style, name it "Thumbnail" (img.Thumbnail), and modify its mc-thumbnail property. This lets you specify that images using that tag should be shown as small thumbnails until the end user either clicks or hovers over the thumbnail to see the large version.

  • Dynamic Effects Styles These are styles that are applied to content used in Dynamic HTML effects, such as drop-down text or popups.

    Example  

    You might select the MadCap|dropDown style and modify its mc-open-image and mc-closed-image properties in order to change or remove the image, such as an arrow, displayed next to drop-down effects.

  • Reusable Content Styles These are styles that are applied to reusable content, such as snippets, variables, or proxies.

    Example  

    You might select the MadCap|breadcrumbsProxy style and modify its border-bottom property. This lets you set the color and width of the bottom border for the "You are here" breadcrumbs feature that can be displayed at the top of topics.

  • Generated Content Styles These are styles that are applied to content that is created when you generate output, such as glossaries, indexes, or tables of contents (TOCs).

    Example  

    You might select the TOC1 class under the p style (p.TOC1) and modify its mc-leader-format property. This lets you set the leader format, such as dots, to be displayed after the first-level headings in the generated TOC for print-based output.

  • Controls/Form Styles These are styles that are applied to content within controls, such as buttons, or forms.

    Example  

    You might select the form style and modify its text-align property in order to center a form that you add in a topic.

Hide Inherited

Hides the inherited styles from the list below in the editor. These are styles that do not yet have explicit settings on them, so they are inheriting default values from a stylesheet located elsewhere (e.g., a factory stylesheet stored in the place where you installed Flare). As soon as you make a change to one of these styles, it ceases to be an inherited style (or at least the property you set is no longer inheriting from the default value). In the Advanced view of the Stylesheet Editor, inherited styles are gray; non-inherited styles are black. In addition, there are a couple of factory media queries (tablet and mobile), which are inherited. If you have not yet edited these media queries, they will not show up in the Medium drop-down field in the local toolbar if you have this option set to hide inherited.

Hide Properties

Hides the properties in the main portion of the Stylesheet Editor. By hiding the properties you can make the editor load faster than it would otherwise.

Medium: [Name of Medium]

You can use this field to select a medium or media query, which opens it in the editor so you can edit it. This includes factory mediums and media queries, as well as those that you may have created. If you have "Hide Inherited" enabled, the factory mediums and media queries will not show up in the drop-down if you have not yet made any edits to them. In the Advanced view of the editor, you can have multiple mediums or media queries open at the same time.The default medium is always placed on the left of the others. See Mediums and Media Queries.

Opens the Properties dialog for the selected style. From this dialog, you can provide various settings for the style(s), such as changing the font or the background color.

Applies bold typeface to the font for the selected style.

Applies italic typeface to the font for the selected style.

Underlines the font for the selected style.

Lets you select a font type (e.g., Arial, Times New Roman), applying it to the selected style.

Lets you select a font size, applying it to the selected style.

Lets you choose and apply a color to the font for the selected style.

Lets you choose and apply a color to the background of the selected style.

[Styles Grid]

Columns and rows in the grid display the various styles and classes in the stylesheet, as well as some of the more common property settings. These grid cells are populated based on the settings you provide in the Properties dialog (which is opened by clicking ) or by selecting certain buttons (e.g., bold, font size) in the editor.

  • Name Displays the full name of the style class (the XML tag followed by a period and the name of the class, if any). For example, if you create a class of the p style called "tip," this column will display "p.tip."
  • Tag Displays the XML tag upon which the class is based.
  • Class Displays the class name if you have created one (based on the XML tag). See Classes.
  • ID Displays the identifier (ID) name if you have created one (based on the XML tag). See Identifiers.
  • Pseudo Class Displays the pseudo class, if one exists (e.g., active, hover, visited). See Pseudo Classes.
  • Preview Displays a preview of the style class as you make changes to the property settings.
  • Comment You can click twice (or click once and press F2) in this cell and type comment text related to the style. See Adding Comments to Styles.

Ribbon Options for Editing Styles

Some options in the Home ribbon were originally designed for local formatting only, which is generally discouraged.

However, if you have a stylesheet open, these options can be used to apply formatting to styles in the Stylesheet Editor. This can speed up the process of editing certain style properties.

Example  

Let’s say you want to make the h1 style green in your stylesheet. After selecting the style in the Stylesheet Editor, you could find and set the color property to green.

However, you could use the color option in the Home ribbon to do the same thing, only faster.