You are here: User Interface Elements - How to Use Each One > Stylesheet Editor

Stylesheet Editor

This editor is used to modify styles contained in topic style sheets. For table style sheets, you will use the Table Style Editor. However, you can also use the Stylesheet Editor to modify standard HTML table tags (e.g., th, td) that are contained within a topic style sheet.

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 is better for new users. It provides an easier way to apply properties to styles, with format options available from a toolbar (similar to the way one would use the Text Format toolbar to change the look topic content without a style). In many cases, only the most common property options are available in the Simplified view (e.g., font, letter/word spacing, paragraph alignment/indentation, auto-numbering 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 style classes and properties in hierarchical tree structures. It is not as quick as using the Simplified view, but it allows you to edit a great deal more settings than are available in the Simplified view.

For more information, see About Styles and Style Sheets and Editing Styles.

How to open this editor

What you can do in this editor

Local Toolbar

Button/Section	Description
	Toggles between an Advanced view and a Simplified view of the Stylesheet Editor. Simplified The Simplified view is better for new users. It provides an easier way to apply properties to styles, with format options available from a toolbar (similar to the way one would use the Text Format toolbar to change the look topic content without a style). In many cases, only the most common property options are available in the Simplified view (e.g., font, letter/word spacing, paragraph alignment/indentation, auto-numbering 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 style classes and properties in hierarchical tree structures. It is not as quick as using the Simplified view, but it allows you to edit a great deal more settings than are available in the Simplified view.
	Cuts the selected style class. You can then paste the style class under a different tag or into a different style sheet.
	Copies the selected style. You can then paste the copy of the style class in the same area, thus creating a new style class. You can also paste the copy of the style class under a different tag or into a different style sheet.
	Pastes the style class that you have cut or copied.
	Deletes the selected style class.
	This button is enabled when you select a tag in the Styles section of the editor. When you click this button, the New Style dialog opens, which lets you create a new style class under the selected tag.
	Opens the New Pseudo Class dialog, which lets you create special "first-letter" and "first-child" pseudo classes. These types of pseudo classes can be used for creating effects such as drop caps in your content. See Creating Drop Caps Effects.
	Opens the Rename Class dialog, which lets you rename a style class that you have created. See Renaming Style Classes.
	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 style sheet to the current one. You can import from one of Flare's factory style sheets or any other CSS file that you have access to. See Importing Styles. Add Medium Opens the Rename Medium dialog, which lets you create a new medium. See Creating Style Sheet Mediums. Stylesheet Links Opens the Stylesheet Links dialog, which lets you link another style sheet to the current style sheet. The style classes within the linked style sheet are therefore copied into the current style sheet. 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 style sheet. Rather than being overwhelmed with the sight of all styles in the style sheet, 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 style sheet; they will simply be hidden until you enable them. See Disabling Styles.

Advanced View

Button/Section	Description
[Show Styles]	You can use the drop-down arrow in this field to filter which types of styles to show in the area below. Auto-numbered styles These are styles to which an auto-number format has been applied. Therefore, an auto-number format style is not technically a unique type of style, because an auto-number format can actually be applied to other types of styles (such as paragraphs and headings). If you apply an auto-number format to a style, that style will be listed in the Stylesheet Editor if you select Show Auto-numbered Styles. example You might select the <h1> style tag and modify its "mc-auto-number-format" property, choosing a format such as {n+}. If you then select Show Auto-numbered Styles in the Stylesheet Editor, the <h1> style will be listed. See About Auto-Numbers. 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 Style Classes for Topics. You can also use this kind of style to apply different master pages to different topics. See About Master Pages. example You might want most topics in your project to use the same master page (to display the same text at the bottom of each topic). However, maybe you want a select few other topics to use a different master page. For the majority of the topics, you can simply apply the main master page to the target. But for the other topics, you can use a topic style. For example, you can create a class for the <html> tag in your style sheet, naming it "SpecialMasterPage" (i.e., html.SpecialMasterPage). Then you can modify the "mc-master-page" property for that class so that it is associated with the secondary master page. Finally, you can apply the html.SpecialMasterPage style to the topics that you want to be associated with that master page. How to use multiple master pages by creating topic styles Create the master pages that you need. See Creating Master Pages. Open your style sheet (in the Advanced view) and select the html tag on the left side of the editor. See Opening Style Sheets. Create a new class. When you are finished it will be placed under the html tag. See Creating New Style Classes. Select your new class on the left side of the editor. In the upper-right corner of the Stylesheet Editor, click the Show field and select Show: Assorted Relevant Properties. Click the cell to the right of the mc-master-page property and select the master page to be associated with it. Press CTRL+S or click to save your work. Open a topic that you want to associate with that master page. See Opening Topics. At the bottom of the XML Editor, click to turn on the structure bars. See About Structure Bars. Hover over the html bar to the left of the topic content until the cursor displays as a hand, and then click it. In the popup menu, select Style Class and choose the style that you want to apply. Note: You will not see any styles from this list until you create a class for the <html> tag in the Stylesheet Editor. 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\|footnote> style affects the number (or symbol) that is inserted into topic content and represents a footnote located elsewhere (end of the page, end of the chapter, etc.). The <MadCap\|footnoteBlock> style affects the text of the footnote. The <MadCap\|footnotesBlock> style affects the area that holds a collection of footnotes. example You might select the <MadCap\|footnote> style and modify its "mc-footnote-number" in order to restart the numbering for footnotes at each chapter (as opposed to each book, page, or section). You might select the <MadCap\|footnoteBlock> style and modify its "color" property in order to show the footnote text in blue. See About Footnotes. 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. example You might select the <th> style and modify its "color" property in order to display table header row text in green. Note: These styles are not to be confused with the separate table style sheets that you can create. However, you can use both table style sheets and these standard table styles from a topic style sheet in order to design the look of your tables and their content. List styles These are styles that are applied to content displayed in a list, such as a bulleted list or numbered procedures. example You might select the <li> style and create a class under it named "indented." Then you might set its "margin-left" property to "0.5 in" so that bulleted list items are indented one-half inch 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. 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 that are applied to images and objects that you inserted into topics. example You might create a class under the <img> tag, name it "Thumbnail" (img.Thumbnail), and modify its "mc-thumbnail" property. This lets you specify that pictures 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> tag (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 tag 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 "styles list" below. These are styles that were included in the template on which you based your new style sheet.
[Medium]	You can use the drop-down arrow in this field to select a factory medium (e.g., non-print, print) or a medium that you have created. A medium is a feature that lets you produce an alternative set of styles in a style sheet, which you can use for different outputs. They are intended to be an exception to the default style you want to use. You can select a medium in the list and then set property values for it in the Stylesheet Editor. See About Style Sheet Mediums.
[Show Properties]	You can use the drop-down arrow in this field to change the way that style properties are displayed in the Stylesheet Editor. Set (Locally) Properties Displays (in the Properties section below) properties that have been set for the selected style directly in one or more topics. In other words, the global setting for that particular style has been overruled in some topic(s) within in the project. For more information, see Local Formatting. Set Properties Displays (in the Properties section below) all properties that have already been set for the selected style. Alphabetical List Displays (in the Properties section below) all of the properties for the selected style in alphabetical order. Property Groups Displays (in the Properties section below) all the different groups holding the properties for the selected style. Property groups are simply a way to organize the properties so that they are easy for you to find. If you want to see the values for a given property group, click the plus button next to it. Assorted Relevant Properties Displays (in the Properties section below) the property groups that are used most often for the selected style type.
Styles	Lists the styles (tags) and their classes in the style sheet.
Properties	Lists the properties relevant to the style that is selected to the left. If the properties are displayed in property groups, click the plus button to see the actual properties. The property name is displayed in the left column. The right column is used 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.
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
[Show Styles]	You can use the drop-down arrow in this field to filter which types of styles to show in the area below. Auto-numbered styles These are styles to which an auto-number format has been applied. Therefore, an auto-number format style is not technically a unique type of style, because an auto-number format can actually be applied to other types of styles (such as paragraphs and headings). If you apply an auto-number format to a style, that style will be listed in the Stylesheet Editor if you select Show Auto-numbered Styles. example You might select the <h1> style tag and modify its "mc-auto-number-format" property, choosing a format such as {n+}. If you then select Show Auto-numbered Styles in the Stylesheet Editor, the <h1> style will be listed. See About Auto-Numbers. 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 Style Classes for Topics. You can also use this kind of style to apply different master pages to different topics. See About Master Pages. example You might want most topics in your project to use the same master page (to display the same text at the bottom of each topic). However, maybe you want a select few other topics to use a different master page. For the majority of the topics, you can simply apply the main master page to the target. But for the other topics, you can use a topic style. For example, you can create a class for the <html> tag in your style sheet, naming it "SpecialMasterPage" (i.e., html.SpecialMasterPage). Then you can modify the "mc-master-page" property for that class so that it is associated with the secondary master page. Finally, you can apply the html.SpecialMasterPage style to the topics that you want to be associated with that master page. How to use multiple master pages by creating topic styles Create the master pages that you need. See Creating Master Pages. Open your style sheet (in the Advanced view) and select the html tag on the left side of the editor. See Opening Style Sheets. Create a new class. When you are finished it will be placed under the html tag. See Creating New Style Classes. Select your new class on the left side of the editor. In the upper-right corner of the Stylesheet Editor, click the Show field and select Show: Assorted Relevant Properties. Click the cell to the right of the mc-master-page property and select the master page to be associated with it. Press CTRL+S or click to save your work. Open a topic that you want to associate with that master page. See Opening Topics. At the bottom of the XML Editor, click to turn on the structure bars. See About Structure Bars. Hover over the html bar to the left of the topic content until the cursor displays as a hand, and then click it. In the popup menu, select Style Class and choose the style that you want to apply. Note: You will not see any styles from this list until you create a class for the <html> tag in the Stylesheet Editor. 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\|footnote> style affects the number (or symbol) that is inserted into topic content and represents a footnote located elsewhere (end of the page, end of the chapter, etc.). The <MadCap\|footnoteBlock> style affects the text of the footnote. The <MadCap\|footnotesBlock> style affects the area that holds a collection of footnotes. example You might select the <MadCap\|footnote> style and modify its "mc-footnote-number" in order to restart the numbering for footnotes at each chapter (as opposed to each book, page, or section). You might select the <MadCap\|footnoteBlock> style and modify its "color" property in order to show the footnote text in blue. See About Footnotes. 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. example You might select the <th> style and modify its "color" property in order to display table header row text in green. Note: These styles are not to be confused with the separate table style sheets that you can create. However, you can use both table style sheets and these standard table styles from a topic style sheet in order to design the look of your tables and their content. List styles These are styles that are applied to content displayed in a list, such as a bulleted list or numbered procedures. example You might select the <li> style and create a class under it named "indented." Then you might set its "margin-left" property to "0.5 in" so that bulleted list items are indented one-half inch 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. 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 that are applied to images and objects that you inserted into topics. example You might create a class under the <img> tag, name it "Thumbnail" (img.Thumbnail), and modify its "mc-thumbnail" property. This lets you specify that pictures 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> tag (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 tag 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 "styles list" below. These are styles that were included in the template on which you based your new style sheet.
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]	You can use the drop-down arrow in this field to select a factory medium (e.g., non-print, print) or a medium that you have created. A medium is a feature that lets you produce an alternative set of styles in a style sheet, which you can use for different outputs. They are intended to be an exception to the default style you want to use. You can select a medium in the list and then set property values for it in the Stylesheet Editor. See About Style Sheet Mediums.
	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 style tags and classes in the style sheet, 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 called "tip" based on the <p> tag, 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). Pseudo Class Displays the pseudo class, if one exists (e.g., active, hover, visited). Preview Displays a preview of the style class as you make changes to the property settings. [Property settings] The rest of the columns in the grid display values for various property settings. The properties shown depends on the style class that you have selected.