About Styles and Style Sheets

Styles are elements that contain formatting settings. You can apply styles to your content to change the way it looks. Flare works with cascading style sheet (CSS) rules that are specified by the World Wide Web Consortium, or W3C (http://www.w3.org).

The heading above is using the <h1> style tag (which is short for a "first-level heading"). Properties have been assigned to this style to affect its look (such as Arial, 12 pt, bold). We can apply this style to any block type of content (e.g., headings or paragraphs). If we were to change the color to green in the style, every heading or paragraph in the project that uses that style would change to green immediately.

An important aspect of CSS is that it is based on community-wide standards set by the W3C. This means that CSS can be used for any XML-based tool, not just Flare. Tools such as Microsoft Word and Adobe FrameMaker also use styles, but they are proprietary, which means they can be used only within that application.

The W3C and CSS Resources

The vast majority of the styles and style properties in Flare were developed by the World Wide Web Consortium (W3C). For more thorough information about each W3C style and property, refer to http://www.w3.org and use the search feature on the website.

Another way to discover the meaning of a specific property is by using the Flare interface. When you select a property in the Stylesheet Editor, a short description of the property is displayed at the bottom of the editor.

The following resources are highly recommended for learning more about CSS.

Online Demos by Mike Hamilton (MadCap Software Vice President of Product Management)
Online School

http://www.w3schools.com/css/css_intro.asp
Books
- Cascading Style Sheets: Designing for the Web by Hakon Wium Lie and Bert Bos
  
  http://tinyurl.com/2sk8xs
- HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) by Elizabeth Castro
  
  http://tinyurl.com/2pblde
- CSS: The Definitive Guide by Eric Meyer
  
  http://tinyurl.com/37bp8w

In addition to the many standard styles from W3C, you might notice several unique-looking styles that begin with the word "MadCap" (e.g., MadCap|footnote, MadCap|toggler). There are also many MadCap-specific properties. You will recognize these properties because they always start with "mc" (e.g., mc-footnote-format, mc-hyphenate). Detailed lists of these styles and properties are provided later in this topic, in the section "MadCap-Specific Styles and Properties."

What Can CSS Do?

CSS is a lot more than simply a method for changing the look of text in your documentation. It can certainly be used to modify text in all kinds of ways (e.g., size, font type, color), but it can do a whole lot more, including changing the presentation and behavior of the following elements:

Element sizing (e.g. put a maximum width on pictures)
Element positioning (e.g., specify that a text box should display to the left of the regular flow of content)
Link attributes (e.g., add page numbering for links in print-based output)
Cursor manipulation
And much more

One of the best ways to truly appreciate the power of CSS is to visit http://www.csszengarden.com. This website contains text and links that let you apply different CSS files to the content. Each time you select a different CSS file, the look and feel of the page changes dramatically.

CSS Styles and Page Structure

In order to truly understand CSS, you need to understand how different parts of an XML-based document relate to corresponding style elements.

As the following image shows, HTML and XHTML documents have certain style elements, usually with opening and closing tags (e.g., <HTML> and </HTML>).

<HTML> This is the outermost style element, which represents the document as a whole. In the image the <HTML> tags are red, and the outside line of the box model to the right is also red.
<HEAD> Within the <HTML> tags are two major areas, controlled by the <HEAD> and <BODY> elements. The first of these (<HEAD>) is used for storing metadata for the document, such as the properties title or other information that is not actually seen by the end user. In the image the <HEAD> tags are purple. Within the <HEAD> tags, this image example has just one sub-element, the document title, which is held within the <TITLE> tags.
<BODY> The second major area within the <HTML> tags is the main body, which is indicated by the <BODY> tags. In the image the <BODY> tags are light blue. The <BODY> tags are the container that hold the various pieces of content that the end user sees in the output. Within the <BODY> tags, this image example has just three sub-elements, a document heading held within the <H1> tags, and two paragraphs held within two sets of <P> tags. There are many more kinds of tags and elements that can be added to the <BODY> section in addition to the three that you see in this example.

Ways to Use CSS

Following are the three main ways to use CSS rules.

Inline CSS

With this method, you specify the formatting rule for the content at the spot where it exists in the document. Although this type of implementation is allowed, it is not recommended because changing the look of the text in the future might mean making changes in many files and many places instead of just one. See Local Formatting.
Embedded CSS

With this method, you specify formatting rules for elements within a file and they affect only that document.

example

You might decide to specify that every paragraph in the document should be 11 points. Therefore, in the XHTML document code, you specify between the <head> tags that all paragraphs (<p> tags) should be that size. As a result, every time a <p> tag is found in that document, the text will be 11 points. In the behind-the-scenes XHTML code, it might look like this:

This method is a bit more powerful than the inline method, but it still does not allow you to control the look and feel of more than one document at a time, therefore it also is not recommended.

If you want to use embedded CSS in Flare, you would need to open the XHTML code (in the Internal Text Editor or in a third-party editor) and enter the embedded CSS rules manually. See Internal Text Editor.
External CSS

With this method, you DO NOT specify formatting rules anywhere within the XHTML or HTML document. Instead, you specify the rules in a separate, external file that has a .css extension (see Creating New Style Sheets and Editing Styles). Then, in the XHTML document you provide a link to that external style sheet (see Applying Master Style Sheets and Applying Style Sheets to Topics).

example

You might decide to specify that every paragraph in all of your documents should be 11 points. Therefore, you create an external style sheet, name it something like styles.css, and specify within it that all paragraphs (<p> tags) should be that size. This work can be done in the Flare interface. If you look at the behind-the-scenes code in the CSS file, it might look like this:

Then you associate the external style sheet with all of the XHTML files that you want to use that look and feel. Again, this can be done in the Flare project at multiple levels (topic, target, and project). If you look in the behind-the-scenes XHTML code of one of the document files, it might look like this:

External style sheets are recommended over the other methods. They make it possible to truly separate the content from the presentation and allow you to apply formatting to multiple places at once.

Best Practice: Style sheets are the best way to control the look of your content. See Best Practice—Using External Style Sheets Instead of Local Formatting .

What is Meant by "Cascading"?

Because there are multiple ways to implement CSS (inline, embedded, external), what happens if there is a conflict? For example, what if you use the inline method to set paragraphs to green, but then you use the external CSS method to set paragraphs to blue? "Cascading" is the concept that is used to decide which method "wins" when such a conflict occurs. It's all about order of precedence. Inline has precedence over embedded styles, and embedded styles have precedence over external style sheets.

So if you make changes in an external style sheet and notice that the look is not being changed, you might check to see if an inline or embedded style setting is overriding it.

External Style Sheets

Flare lets you create and use two kinds of style sheets—topic and table style sheets.

Topic style sheets This type of style sheet lets you store styles for general content in your project. You can have as many styles as you want within one topic style sheet, and you can create as many style sheets as you need (although one style sheet is often sufficient for most authors and most projects). After you add a topic style sheet to a project, it is stored in the Resources\Stylesheets subfolder of the Content Explorer. The exception to this is when you import source files that already include a style sheet. In that case, Flare retains the structure of the imported files, storing the style sheet in the same location where it resided in the source files.

Note: If you would like to access the same style sheet that is used for the Flare documentation, you can download it from this location:

http://www.madcapsoftware.com/documentation/Styles/styles.css

After downloading this file, it opens in Notepad. You can then select File>Save As in Notepad and save the style sheet to any location you want. For example, if you already have a project where you want to use it, you can navigate to the folder where that project is stored in Windows and save the style sheet in the Content\Resources\Stylesheets subfolder.

Note: You cannot use multiple style sheets per topic for native Adobe PDF, Microsoft XPS, and XHTML outputs.
Table style sheets This type of style sheet lets you create a unique look for tables that you insert throughout your project. This is a great way to create tables that have different patterns (e.g., every other row might have a green background). After you add a table style sheet to a project, it is stored in the Resources\TableStyles subfolder of the Content Explorer.

example

You might use two different types of tables in your project—a "basic" one (with simple borders and no shading) and a "fancy" one (with customized borders and colored shading in certain rows and columns). So you create one table style sheet (let's say it's called "basic.css") and format it the way you want, and then you create a second table style sheet (let's say it's called "fancy.css") and format it. Then, as you insert tables into your topics, you can associate the new table with one of these two table style sheets.

Note: Even though you can create a table style sheet to affect the look of your tables, alternatively you can use a topic style sheet to modify standard CSS table tags (e.g., <th>, <td>) that are used to dictate the look of different parts of a table (e.g., heading text, table cell text).

Note: If you are importing Adobe FrameMaker documents and have tables that you have formatted in a certain way, you can create matching table styles as a result of the import. This can be specified on the Options page of the Import FrameMaker Wizard. In the Flare project, the new table styles will be named after the format named applied to the table in FrameMaker (e.g., "Format_A.css," "Format_B.css," and so on). You can rename these table style sheets in Flare after the import. Even if you do not use this mapping feature, the table formatting still comes across when you import the files. The only difference is that table style sheets make it easier to maintain the formatting of your tables within Flare. See Creating a Project by Importing FrameMaker Documents and Creating Topics by Importing FrameMaker Documents.

Master Style Sheets for Projects and Targets

When you want to use styles in your content, the style sheet needs to be made available for the content in question. In Flare, you can associate style sheets with a single topic (see Applying Style Sheets to Topics). However, you also have the option of using a style sheet as a "master," applying it at either the project or target level, or both.

Master style sheets at the project level You can associate a master style sheet with an entire Flare project. The styles will therefore be available to all content in the project. You can set the project-level master style sheet in the Project Properties dialog (select Project>Project Properties).
Master style sheets at the target level You can associate a master style sheet with an entire Flare target. The styles will therefore be used for the content in the target. If you have specified a master style sheet at the project level and another at a target level, the style sheet at the target will take precedence. If you are using different master style sheets for different targets, the style sheet associated with the primary target determines what you see in the XML Editor. You can set the target-level master style sheet on the General tab of the Target Editor.

See Applying Master Style Sheets.

Best Practice: Using master style sheets is recommended over applying style sheets to individual topics. See Best Practice—Use Master Style Sheets.

Note: If you apply a master style sheet at either the target or project level, you will no longer be able to associate style sheets at the topic level (unless you remove the master style sheet associations at the project and/or target level). If you have previously applied multiple style sheets to a single topic and then switch to using a master style sheet, you should make sure that all of the styles you need from the various style sheets are all included in your master style sheet.

Editors for Style Sheets

When you open a topic style sheet, it is displayed in the Stylesheet Editor. When you open a table style sheet, it is displayed in the Table Style Editor.

Stylesheet Editor—For Topic Style Sheets

The Stylesheet Editor allows you to use either an "Advanced" view or a "Simplified" view when working with topic styles.

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.

Table Style Editor—For Table Style Sheets

The Table Style Editor contains multiple tabs and fields for specifying settings such as patterns, borders, backgrounds, alignment, and margins.

Getting Behind the Scenes

Although Flare provides you with a user interface to work on styles, you can get behind the scenes to see and edit the code for the style sheet. One way to do this is to open the style sheet in Flare. Then click the Send To button in the Standard toolbar and select Notepad. If you make changes in that file, those edits are displayed in the Flare Stylesheet Editor when you save the file in Notepad.

Style Tags, Classes, Properties, and Values

When working with styles, there are some unique terms that you will encounter, especially in topic style sheets.

Classes

You can think of tags as parent styles, because they can have children. A child of a tag is called a "class." Some of these classes might already be included in your style sheet when you first add it to a project. You also have the option of creating classes of parent tags.

Note: Although you can create new style classes, you cannot create new parent tags.

When you create a class, it automatically takes on all of the same qualities (or "attributes") from the parent tag (e.g., color, alignment, size). However, you can change some of those attributes for the class as necessary so that it is different from the parent tag in some ways.

example

Let's say you want to create a special look for paragraph notes in order to provide additional information in a topic. In addition, you might want yet another special kind of paragraph to be used for tips. Perhaps you want a blue background for your note paragraphs, and you want a yellow background for your tip paragraphs. Meanwhile, for your regular paragraphs, you do not want any colored background.

Therefore, you could create a class of your parent <p> tag and name it "Note." Then you might create another class of your <p> tag and name it "Tip." For the Note class, you could change the background property to display in blue, and you could change the same property for the Tip class to display in yellow. But you would leave the background property for the parent <p> tag as it is, without a color. In the end, both the Note and Tip classes would take on all of the style settings from its parent tag—<p>—with the exception of the background color that you have specified for each.

How can you distinguish between parent tags and style classes? In the Simplified view of the Stylesheet Editor, style classes are listed after the parent tags, and a period is added between the name of the parent tag and the name of the class (e.g., p.Tip).

In the Advanced view of the Stylesheet editor, parent tags and style classes are shown in a tree view. You can click the plus button next to a parent tag to see its style classes.

Properties and Values

Every tag and style class has certain attributes that contribute to its look and feel. The elements used to control these attributes are known as "properties," which can be organized into property groups (in the Advanced view of the Stylesheet Editor). The precise information within a property is known as a "value."

example

Returning to the example of a note for a paragraph tag (p.Note), let's say we want the background to be blue. That particular quality can be controlled in a property called "background-color." In the Advanced view of the Stylesheet Editor, this property can be found in the property group named "Background." For our p.Note style, we would assign a value of "blue" to that property.

There are hundreds of basic properties that you can use to change various aspects of a style.

example

Let's say that you plan to create several bulleted lists in your topics, and you want to be able to change the look of bullet items using a style. Perhaps you want to do this for bullet items that are indented to the second level in a list (i.e., they are sub-bullets of first-level items in the list). Suppose you want those bullet items to be displayed in a blue, 10-point Verdana font. Like this:

In order to do this, you might first select the <li> tag in the Stylesheet Editor and create a class for it named "Indented2" (li.Indented2). Then you could select this class, open the Font property group, and change the "color," "font-family," and "font-size" properties.

Therefore, in a situation such as this, you would have set the following in the Stylesheet Editor:

Style class: li.Indented2

Property: color (value=blue)

Property: font-family (value=Verdana)

Property: font-size (value=10 pt)

Here is how it would look when you are finished (in the Simplified view of the style sheet).

Here is how it would look when you are finished (in the Advanced view of the style sheet).

MadCap-Specific Styles and Properties

These special styles and properties have been added to the Flare user interface in order to support some of the unique features available only in MadCap Software products.

Following is a list of MadCap-specific styles.

Style	Description	See These Topics
MadCap\|annotation	Modifies the look of content in a topic to which an annotation (i.e., internal topic comment) points. For example, you might want annotated text to be displayed in the XML Editor with red font and a yellow background. This does not change the text as it will be shown in the output, but rather only as it is displayed in the XML Editor.	Editing Annotations
MadCap\|bodyProxy	Modifies the look of the "container" holding topic content. For example, you might edit this style to add a border around all topic content.	Adding and Editing Body Proxies for Print Output
MadCap\|breadcrumbsProxy	Modifies the look of breadcrumbs in online output.	Using Styles to Determine the Look of Breadcrumbs
MadCap\|concept	Modifies the look of concepts that have been inserted in the XML Editor (when markers are turned on). This does not affect the output.	Editing Concepts
MadCap\|conceptLink	Modifies the look (e.g., font, color, wording) of a concept (See Also) link heading. When you do this, the style changes for all concept links in any topics in your project.	Editing Concept Links
MadCap\|conceptLink ControlList	Modifies the look of the entire list (<ul> element) when concept links are displayed in a list, rather than in a popup.	Editing Concept Links
MadCap\|conceptLink ControlListItem	Modifies the look of individual items in the list (<li> elements) when concept links are displayed in a list, rather than in a popup.	Editing Concept Links
MadCap\|conceptLink ControlListItemLink	Modifies the look of links in the list (<a> elements) when concept links are displayed in a list, rather than in a popup.	Editing Concept Links
MadCap\|conceptsProxy	Modifies the look of the "container" holding a generated list of concepts.	Using Styles to Determine the Look of a List of Concepts
MadCap\|conditionalText	Modifies the look of content in the XML Editor that has a condition tag applied to it. For example, you might want conditionalized content to stand out with a larger font so you can easily spot it while editing content. This does not affect the output.	About Condition Tags
MadCap\|dropdown	Modifies the entire container holding a drop-down effect, including the image that is shown when a drop-down effect is open or closed.	Editing Drop-Down Text
MadCap\|dropDownBody	Modifies the content that is shown when users open a drop-down effect.	Editing Drop-Down Text
MadCap\|dropDownHead	Modifies the text in the first paragraph of a drop-down effect (i.e., the paragraph where the drop-down link is located).	Editing Drop-Down Text
MadCap\|dropDownHotspot	Modifies the specific text that you select in the first paragraph of a drop-down effect to serve as the link for opening the drop-down body. If you do not select specific text in the first paragraph to serve as the hotspot, the entire first paragraph is used as the hotspot.	Editing Drop-Down Text
MadCap\|endnoteBlock	Modifies the container (or block) holding individual endnote comments. For example, if you want to add a border around each endnote comment created from an endnotes proxy, you would use this style.	Editing Footnotes
MadCap\|endnotesBlock	Modifies the container (or block) holding all endnote comments. For example, if you want to add a border around the collection of all endnote comments created from an endnotes proxy, you would use this style.	Editing Footnotes
MadCap\|equation	Modifies the appearance of all equations.	Editing Equations
MadCap\|expanding	Modifies the entire container holding an expanding text effect, including the image that is shown when an expanding text effect is open or closed.	Editing Expanding Text
MadCap\|expandingBody	Modifies the expanded text portion of an expanding text effect (i.e., the area that is displayed or hidden when users click the hotspot link).	Editing Expanding Text
MadCap\|expandingHead	Modifies the hotspot portion of an expanding text effect.	Editing Expanding Text
MadCap\|footnote	Modifies both the footnote number (or symbol) where it is inserted in the topic, as well as the number and accompanying comment text (at the bottom of the page, or wherever else you specify its location).	Editing Footnotes
MadCap\|footnoteBlock	Modifies the container (or block) holding individual footnote comments. For example, if you want to add a border around each footnote comment on a page, you would use this style.	Editing Footnotes
MadCap\|footnotesBlock	Modifies the container (or block) holding all footnote comments. For example, if you want to add a border around the collection of all footnote comments on a page, you would use this style.	Editing Footnotes
MadCap\|glossaryProxy	Modifies the look of the "container" holding a generated glossary.	Using Styles to Change the Look of a Glossary
MadCap\|glossaryTerm	Modifies the look of glossary term links.	Using Styles to Change the Look of a Glossary
MadCap\|helpControlList	Modifies the look of the entire list (<ul> element) when Help control links are displayed in a list, rather than in a popup. This is a general style that controls all three types of Help control links—concept, keyword, and related topics. Alternatively, you can set properties on each specific style—MadCap\|conceptLinkControlList, MadCap\|keywordLinkControlList, or MadCap\|relatedTopicsControlList.	Editing Concept Links Editing Keyword Links Editing Related Topics Links
MadCap\|helpControl ListItem	Modifies the look of individual items in the list (<li> elements) when Help control links are displayed in a list, rather than in a popup. This is a general style that controls all three types of Help control links—concept, keyword, and related topics. Alternatively, you can set properties on each specific style—MadCap\|conceptLinkControlListItem, MadCap\|keywordLinkControlListItem, or MadCap\|relatedTopicsControlListItem.	Editing Concept Links Editing Keyword Links Editing Related Topics Links
MadCap\|helpControl ListItemLink	Modifies the look of links in the list (<a> elements) when Help control links are displayed in a list, rather than in a popup. This is a general style that controls all three types of Help control links—concept, keyword, and related topics. Alternatively, you can set properties on each specific style—MadCap\|conceptLinkControlListItemLink, MadCap\|keywordLinkControlListItemLink, or MadCap\|relatedTopicsControlListItemLink.	Editing Concept Links Editing Keyword Links Editing Related Topics Links
MadCap\|helpControl Menu	Modifies the look of links (i.e., menu items) that users see when they click a concept link, keyword link, or related topics control. This style is grouped with the "Dynamic Effects Styles" (which you can select from the drop-down list in the upper-left corner of the Stylesheet Editor). This particular style controls the entire list when you are using the popup menu method for displaying Help control links.	Editing Concept Links Editing Keyword Links Editing Related Topics Links
MadCap\|helpControl MenuItem	Modifies the look of links (i.e., menu items) that users see when they click a concept link, keyword link, or related topics control. This style is grouped with the "Dynamic Effects Styles" (which you can select from the drop-down list in the upper-left corner of the Stylesheet Editor). This particular style controls the individual list items when you are using the popup menu method for displaying Help control links.	Editing Concept Links Editing Keyword Links Editing Related Topics Links
MadCap\|indexProxy	Modifies the look of the "container" holding a generated index for print-based output.	Determining the Look of Your Print Index
MadCap\|keyword	Modifies the look of index keywords that have been inserted in the XML Editor (when markers are turned on). This does not affect the output.	Editing Index Keywords
MadCap\|keywordLink	Modifies the look (e.g., font, color, wording) of a keyword link heading. When you do this, the style changes for all keyword links in any topics in your project.	Editing Keyword Links
MadCap\|keywordLink ControlList	Modifies the look of the entire list (<ul> element) when keyword links are displayed in a list, rather than in a popup.	Editing Keyword Links
MadCap\|keywordLink ControlListItem	Modifies the look of individual items in the list (<li> elements) when keyword links are displayed in a list, rather than in a popup.	Editing Keyword Links
MadCap\|keywordLink ControlListItemLink	Modifies the look of links in the list (<a> elements) when keyword links are displayed in a list, rather than in a popup.	Editing Keyword Links
MadCap\|listOfProxy	Modifies the look of the "container" holding a generated list of elements.	Using Styles to Determine the Look of a List of Elements
MadCap\|miniTocProxy	Modifies the look of the "container" holding a generated mini-TOC.	Using Styles to Determine the Look of a Print Mini-TOC Using Styles to Determine the Look of an Online Mini-TOC
MadCap\|pageFooter	Modifies the look of the content contained in a page footer used in master pages for Adobe FrameMaker and Microsoft Word output.	Adding Page Header and Footer Proxies
MadCap\|pageHeader	Modifies the look of the content contained in a page header used in master pages for Adobe FrameMaker and Microsoft Word output.	Adding Page Header and Footer Proxies
MadCap\|popup	Modifies the look of text popup links that have been inserted in the XML Editor. This does not affect the output.	Editing Text Popups
MadCap\|popupBody	Modifies the popup text portion of an popup text effect (i.e., the area that is displayed or hidden when users click the hotspot link).	Editing Text Popups
MadCap\|popupHead	Modifies the hotspot portion of a popup text effect.	Editing Text Popups
MadCap\|qrCode	Modifies the appearance of all QR codes.	Editing QR Codes
MadCap\|relatedTopics	Modifies the look (e.g., font, color, wording) of a related topics link heading. When you do this, the style changes for all related topics links in any topics in your project.	Editing Related Topics Links
MadCap\|relatedTopics ControlList	Modifies the look of the entire list (<ul> element) when related topics are displayed in a list, rather than in a popup.	Editing Related Topics Links
MadCap\|relatedTopics ControlListItem	Modifies the look of individual items in the list (<li> elements) when related topics are displayed in a list, rather than in a popup.	Editing Related Topics Links
MadCap\|relatedTopics ControlListItemLink	Modifies the look of links in the list (<a> elements) when related topics are displayed in a list, rather than in a popup.	Editing Related Topics Links
MadCap\|relationships Heading	Modifies the look of headings used in relationship links. There are three classes of this style that you can edit. If you edit the main MadCap\|relationshipsHeading stylee, the look of all of the classes are affected. However, you can also edit the look of each class if you want. concept This class lets you change the look of the heading that is displayed above any concept links (i.e., any topics found in the "concept" column of the relationships table). reference This class lets you change the look of the heading that is displayed above any reference links (i.e., any topics found in the "reference" column of the relationships table). task This class lets you change the look of the heading that is displayed above task links (i.e., topics found in the "task" column of the relationships table).	Editing Relationship Link Styles
MadCap\|relationships Item	Modifies the look of link items created from a relationships table.	Editing Relationship Link Styles
MadCap\|relationships Proxy	Modifies the look of the "container" holding the content from a generated relationships table.	Editing Relationship Link Styles
MadCap\|shortcut	Modifies the look (e.g., font, color) of a Shortcut control link. When you edit the style for a Shortcut control, the style changes for all Shortcut controls in any topics in your project.	Editing Shortcut Controls
MadCap\|snippetBlock	Modifies the look of block snippets that have been inserted in the XML Editor. If you insert a snippet on a blank line in a topic, it is inserted as a block snippet (as opposed to a text snippet) and takes up all of the room so that no other content can be added. For example, if you want all of your block snippets to stand out with a blue font—making it easier to identify these snippets as you work—you can use this style. This style does not affect the output. If you want to make changes to a snippet that affect the output, you can open the snippet and modify it in the XML Editor, just as you would edit a regular topic.	Editing Snippets
MadCap\|snippetText	Modifies the look of text snippets that have been inserted in the XML Editor. If you insert a snippet on a line where other content exists, it is inserted as a text snippet, as opposed to a block snippet. For example, if you want all of your block snippets to stand out with a blue font—making it easier to identify these snippets as you work—you can use this style. This style does not affect the output. If you want to make changes to a snippet that affect the output, you can open the snippet and modify it in the XML Editor, just as you would edit a regular topic.	Editing Snippets
MadCap\|tocProxy	Modifies the look of the "container" holding a generated TOC for print-based output.	Using Styles to Determine the Look of a Print TOC
MadCap\|toggler	Modifies the look (e.g., font, color) of a toggler hotspot. When you do this, the style changes for all toggler hotspots in any topics in your project.	Editing Togglers
MadCap\|topicToolbar Proxy	Modifies the look of the "container" holding a generated topic toolbar. The topic toolbar proxy will use whatever settings are specified on the Topic Toolbar tab in the Skin Editor. However, you can override those settings for an individual proxy.	Editing Topic Toolbar Proxies Using Styles to Determine the Look of Topic Toolbars
MadCap\|variable	Modifies the look of variables that have been inserted in the XML Editor. For example, if you want all of your variables to stand out with a blue font—making it easier to identify them as you work—you can use this style. This style does not affect the output.	Editing Variables
MadCap\|xref	Modifies the look and format used in cross-references.	Editing Cross-Reference Style Formats

Following is a list of MadCap-specific style properties.

Property	See These Topics
mc-auto-number-class	Creating Auto-Number Formats for Styles
mc-auto-number-format	Creating Auto-Number Formats for Styles
mc-auto-number-offset	Creating Auto-Number Formats for Styles
mc-auto-number-position	Creating Auto-Number Formats for Styles
mc-breadcrumbs-count	Using Styles to Determine the Look of Breadcrumbs
mc-breadcrumbs-divider	Using Styles to Determine the Look of Breadcrumbs
mc-breadcrumbs-prefix	Using Styles to Determine the Look of Breadcrumbs
mc-closed-image	Editing Drop-Down Text Editing Expanding Text Editing the Style of Glossary Term Links Editing Togglers
mc-column-count	Determining the Look of Your Print Index
mc-disable-glossary-terms	Ignoring Glossary Terms in Styles
mc-feader-type	Using Styles to Determine the Page Type for Page Footers and Headers
mc-float	Positioning Paragraphs
mc-footnote-format	Editing Footnote Number Formats
mc-footnote-number	Restarting Footnote Numbering
mc-footnote-position	Editing Footnote Comment Position
mc-format	Editing Cross-Reference Style Formats
mc-heading-format	Using Styles to Change the Look of a Glossary Determining the Look of Your Print Index
mc-heading-level	Creating a Topic for a Print TOC Determining the Levels and Look of Your Print TOC Using Styles for Print TOC Heading Levels
mc-help-control-display	Using Styles to Determine the Display for Help Control Links
mc-hyphenate	Setting Hyphenation
mc-hyphenate-maximum-adjacent-line-count	Setting Hyphenation
mc-hyphenate-shortest-prefix	Setting Hyphenation
mc-hyphenate-shortest-suffix	Setting Hyphenation
mc-hyphenate-shortest-word	Setting Hyphenation
mc-index-headings	Using Styles to Include or Exclude Index Headings
mc-label	Editing Keyword Links Editing Relationship Link Styles
mc-leader-align	Editing Relationship Link Styles Using Styles to Determine the Look of a List of Concepts Using Styles to Determine the Look of a List of Elements Using Styles to Determine the Look of a Print Mini-TOC Using Styles to Determine the Look of a Print TOC
mc-leader-format	Editing Relationship Link Styles Using Styles to Determine the Look of a List of Concepts Using Styles to Determine the Look of a List of Elements Using Styles to Determine the Look of a Print Mini-TOC Using Styles to Determine the Look of a Print TOC
mc-leader-offset	Editing Relationship Link Styles Using Styles to Determine the Look of a List of Concepts Using Styles to Determine the Look of a List of Elements Using Styles to Determine the Look of a Print Mini-TOC Using Styles to Determine the Look of a Print TOC
mc-open-image	Editing Drop-Down Text Editing Expanding Text Editing the Style of Glossary Term Links Editing Togglers
mc-output-support	Using Styles to Determine Output Support for Proxies
mc-popup-height	Customizing the Size of Topic Popups
mc-popup-width	Customizing the Size of Topic Popups
mc-redacted	Setting Redacted Text on Content
mc-short-line	Setting Short Line Elimination
mc-short-line-loosen-end-length	Setting Short Line Elimination
mc-short-line-loosen-maximum	Setting Short Line Elimination
mc-short-line-method	Setting Short Line Elimination
mc-short-line-step	Setting Short Line Elimination
mc-short-line-tighten-maximum	Setting Short Line Elimination
mc-thumbnail	Showing Images as Thumbnails in Output
mc-thumbnail-max-height	Showing Images as Thumbnails in Output
mc-thumbnail-max-width	Showing Images as Thumbnails in Output
mc-toc-depth	Using Styles to Determine the Look of an Online Mini-TOC

Inheritance

One of the features of CSS that makes it much more powerful than other style systems is inheritance. This is simply the idea that elements in your document can inherit the style settings from other elements. This occurs when one style element is added within another element, therefore creating a parent-child relationship. The child inherits all of the style settings that the parent has, unless you override those settings on the child element. This can be a very powerful feature because it allows you to set properties on a parent element once rather than setting the same thing on all of its children elements.

example

Let's say you want all of your block-level elements to use Arial as the font type. Rather than setting Arial on all of the various tags (h1, p, div, ul, li), you can set it on the <body> tag. That way, the setting will "trickle down" automatically to all of the child elements.

After some time you might decide that you want to continue using Arial for all of those elements except the <p> tags. In that case, you can simply set the other font type on the <p> style. The rest of the elements will continue to use Arial.

What happens if a value is not set on the <body> tag in the style sheet? In that case, the value is inherited from the element's setting in the end user's browser.

Types of Styles

There are several categories of styles that you can apply to content. To filter the list of styles shown, use the drop-down list in the Show Styles section of the Stylesheet Editor.

For steps on applying each type of style to content in your project, see Applying Styles to Topic Content. Following are explanations of the basic types of styles.

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
1. Create the master pages that you need. See Creating Master Pages.
2. Open your style sheet (in the Advanced view) and select the html tag on the left side of the editor. See Opening Style Sheets.
3. Create a new class. When you are finished it will be placed under the html tag. See Creating New Style Classes.
4. Select your new class on the left side of the editor.
5. In the upper-right corner of the Stylesheet Editor, click the Show field and select Show: Assorted Relevant Properties.
6. Click the cell to the right of the mc-master-page property and select the master page to be associated with it.
7. Press CTRL+S or click to save your work.
8. Open a topic that you want to associate with that master page. See Opening Topics.
9. At the bottom of the XML Editor, click to turn on the structure bars. See About Structure Bars.
10. Right-click on the html bar to the left of the topic content.
11. In the context 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.

Pseudo Classes

Pseudo classes are a special group of style classes in cascading style sheets that pertain to elements when they're in a certain state. They are most often used for styles associated with hyperlinks.

Link Pseudo Classes

Link pseudo classes include the following:

Active This class is used when the person activates the element (mouse is clicked).
Focus This class is used if the element has the focus.
Hover This class is used when the person hovers the mouse over the element.
Link This class is used for links that have not yet been clicked.
Visited This class is used for links that have already been clicked.

example

Let's say you want the text to display in green for links that have not yet been clicked. But after a link is clicked, you want it to display as gray text. Therefore, under the <a> style tag, you modify the "link" pseudo class and change the font color to green. Then you modify the "visited" pseudo class under the <a> tag so that the font color is gray.

First-Letter and First-Child Pseudo Classes

There are a couple of additional kinds of pseudo classes that you can create from the Stylesheet Editor. These are called "first-letter" and "first-child" pseudo classes.

The first-letter class lets you apply style settings to the first letter in a block (such as a paragraph), if it is not preceded by any other content (such as an image). This pseudo class is useful for creating drop caps and initial caps effects. See Creating Initial Caps Effects and Creating Drop Caps Effects.

The first-child class lets you apply style settings to the first child of another element (e.g., the first <p> tag that occurs within a <div> tag).

Mediums

What if you want to use certain style settings for some online outputs and different style settings for print-based outputs, without duplicating content? You can single-source styles for topics and tables through the use of mediums.

A medium is an alternative set of styles in a style sheet that you use for different outputs. They are intended to be an exception to the default style you want to use. A common use for a medium is to have one group of style settings for online formats (DotNet Help, HTML Help, WebHelp, WebHelp Plus, WebHelp AIR, WebHelp Mobile) and a different group of settings for print-based formats (Adobe PDF, XHTML, Microsoft XPS, Microsoft Word, Adobe FrameMaker). Therefore, you could use the default medium for the online formats and use a "print medium" for PDF and the other print-based targets.

example

Let's say you have text hyperlinks that are shown in blue font with an underline. That may be fine for Target A, but let's say you want this style to appear in black font with no underline for Target B. The solution is to use a style sheet medium.

Suppose Target A is using the "default" medium, where the blue underline properties are specified. With the properties for Target A already set, you now need to specify style properties for Target B. Therefore, in the Stylesheet Editor, instead of selecting the "default" medium, you can select another medium (e.g., the "print" medium) and change the properties for the style to black with no underline. It's the same style sheet and the same style that you are working with. The only difference is that one medium is telling Flare to display that content in blue with an underline, and the other medium is telling it to use black font with no underline. With Target A using the default medium and Target B using the other medium, the content will display appropriately in each output.

See About Style Sheet Mediums and Creating Topic Styles for Print Output.

Table Print Styles

A table style sheet allows you to single-source your formatting by setting the properties in one place and reusing them wherever you insert tables in your project. But what if you want the tables in online output to look one way and the tables in your printed output to look another way? Here are two options… Solution #1—Two mediums: This is the recommended solution. You can have one table style sheet and use a medium to specify different settings for it—one medium is used for online output and another for print. Solution #2—Two table style sheets: You can insert a single table at each location, using a special version of the table style for print-based output. This solution requires you to have two table style sheets—one for online and one for print. See Creating Table Styles for Print Output.

examples

Let's say you create a table style sheet with a pattern design that displays the table with alternating green rows. The problem is that for printed output, you need the rows to display in light gray.

Suppose you decide to use the recommended solution (mediums). Let's say the target for online output is called Target A, and the one for print output is called Target B. the first step is to make sure you have two mediums. Suppose Target A is using the "default" medium, where the rows are set to use a green background. With the properties for Target A already set, you now need to specify style properties for Target B. Therefore, in the Table Style Editor, instead of selecting the "default" medium, you can select another medium (e.g., the "print" medium) and change the properties for the rows to light gray. It's the same table style sheet and the same pattern that you are working with. The only difference is that one medium is telling Flare to display that table rows with a green background, and the other medium is telling it to use light gray. With Target A using the default medium and Target B using the other medium, the tables will display appropriately in each output.

If you decide instead to use the other solution (two table style sheets), you first create a table style sheet and specify settings in it appropriate for online output (e.g., green background for table rows). Then you create a secondary style sheet. This extra table style sheet will have design settings that are appropriate for printed output (e.g., light gray table rows). When you insert the table into your content (or edit an existing table), you select the original online table style and also select the special print version of the table style. If you generate any targets based on an online format (DotNet Help, HTML Help, WebHelp, WebHelp Plus, WebHelp AIR, WebHelp Mobile), the end user will see green rows in the table. However, if you generate any targets based on a print format (Adobe PDF, XHTML, Microsoft XPS, Microsoft Word, Adobe FrameMaker), the end user will see light gray rows in the table.

Note: If you used print table styles in the past and want to remove them now in favor of the medium method, you can use an option in the Apply Table Style dialog in the Table Style Editor. When this option is enabled, print table styles will be removed from any tables updated by this dialog. See How to apply a table style sheet—multiple tables and files.

Steps for Using Styles and Style Sheets

Following are the basic steps involved with using styles and style sheets in your project.

Create a new style sheet This entails adding to your project a new style sheet that is based on a template for an existing style sheet. Flare provides you with templates for both topic and table style sheets. (If you import a project that already contains a style sheet, it is added to the Flare project automatically.) See Creating New Style Sheets.

Note: You can also import an existing style sheet from outside your project.
Apply a style sheet To use the styles from a topic style sheet, you must link the style sheet to the appropriate file(s). It is recommended that you apply a master style sheet at the project or target level. The style sheet then automatically becomes available for all topics in that project or target. See Applying Master Style Sheets.

You also have the option of applying a style sheet to a single topic or to multiple topics at the same time. See Applying Style Sheets to Topics.
Create style classes After a style sheet is opened, you can add new classes to parent tags (e.g., if you add a class called "Tip" to the parent tag <p>, the result is a style called "p.Tip"). There are numerous ways to do this. See Creating New Style Classes.
Edit styles You can customize the properties for your styles to get the look and feel that you want. See Editing Styles.
Apply a style to topic content The final step is to apply styles to the content in your project. See Applying Styles to Topic Content.

Common Tasks For Editing Styles

There are hundreds of tasks that you can perform in Flare by using styles. Following are some common tasks that you might perform when editing styles.

Auto-numbers
- Formats Auto-numbering can be used when you want to create content where certain portions are numbered automatically. This can be accomplished through the use of auto-number formats. See Creating Auto-Number Formats for Styles.
Breadcrumbs
- Look After you create breadcrumbs for online output by using the breadcrumbs proxy, you can modify the look of those breadcrumbs by using styles. There are numerous ways that you can change the look of breadcrumbs. See Using Styles to Determine the Look of Breadcrumbs.
DITA
- Edit styles In this version of Flare, you cannot edit DITA files natively. However, you can edit style classes that result from imported DITA elements. See Editing DITA Styles.
Equations
- Look You can change the appearance of all equations through the use of the <MadCap|equation> style tag. See Editing Equations.
Footnotes
- Borders You can modify the default border that is added above footnote comments. You can change the border thickness, color, style, and other settings. You can also remove the border altogether. See Editing the Border Above Footnotes.
- Comment font settings You can modify the font in a footnote comment. This includes changing the font family, size, color, case, and more. See Editing Footnote Comment Font Settings.
- Comment position You can change the location where a footnote comment is placed in the output (e.g., end of page, document, chapter, section, book). See Editing Footnote Comment Position.
- Comment spacing You can modify the spacing for the footnote comment text. This includes the ability to change the spacing above or below the comment text, the white space between words or characters, or the indentation before the number and text. See Editing Footnote Comment Spacing.
- Number formats By default, a decimal number (e.g., 1, 2, 3) is used when you insert a footnote. However, you can select a different format. For example, you can change the format to uppercase alpha (e.g., A, B, C) or lowercase Roman (e.g., i, ii, iii). You can also replace the number with a symbol, such as an asterisk. See Editing Footnote Number Formats.
- Numbers - look You can change the look of the footnote numbers (both in-text and in-comment), by creating and modifying <span> style classes. Alternatively, you can use the <MadCap|footnote> style or a class of it to modify the look of both the in-text and in-comment footnote numbers. The difference is that the <span> style lets you change the look of one or the other, rather than both at the same time. See Editing the Look of Footnote Numbers.
- Restart numbering When you insert footnotes, the numbers are incremented throughout your manual. However, you can restart the numbering at a certain location (e.g., at the beginning of the next chapter or section). See Restarting Footnote Numbering.
Glossaries
- Look of generated glossary You can use styles to change the appearance of a glossary in print-based output. You can modify the look of individual elements within the glossary, as well as the entire container holding the glossary. See Using Styles to Change the Look of a Glossary.
  
  Note: If you want to change the look of glossaries in online output, you can do so by modifying styles within your skin. See Editing Skin Settings and Specifying Skin Style Settings.
- Ignoring glossary terms You can configure a target to convert glossary terms to links automatically when they are found in topics. In addition, there is a way to purposely ignore some terms so that they are not converted to links. This can be done by setting the mc-disable-glossary-terms property on a style. By default, this feature is turned on for <h1> through <h6> styles, as well as hyperlinks (i.e., content with the <a> tag). This means that if a glossary term is found in a heading or text hyperlink, it will not be converted to a link. However, if the same term is found in, say, a regular paragraph, the term will be converted to a link (as long as you do not turn this feature on for that paragraph style). See Ignoring Glossary Terms in Styles.
Indexes
- Look of generated index for print output If you incorporate a generated index into your printed output (see Creating a Topic for a Print Index), you can customize the way the index entries look in the output. This includes adjusting properties such as font family and size, word space, and space above/below. You can also change the look of the entire container holding the generated index. See Determining the Look of Your Print Index.
  
  Note: If you want to change the look of indexes in online output, you can do so by modifying styles within your skin. See Editing Skin Settings and Specifying Skin Style Settings.
Links
- Concept links You can edit the style (e.g., font, color, wording) of a concept link. When you edit the style for a concept link, the style changes for all concept links in any topics in your project. See Editing Concept Links.
- Cross-references You can edit the style settings (e.g., format, font, color) of cross-references. This includes the ability to incorporate page numbers and context-sensitivity into a cross-reference format. See Editing Cross-Reference Style Formats and Editing Text for Context-Sensitive Cross-References.
- Drop-down text You can edit drop-down effects that you have inserted into topics. See Editing Drop-Down Text.
- Expanding text You can edit expanding text effects that you have inserted into topics. See Editing Expanding Text.
- Keyword links You can edit keyword links that you have inserted into topics. See Editing Keyword Links.
- Related topics links You can edit related topics links that you have inserted into topics. See Editing Related Topics Links.
- Relationship links You can edit the style settings (e.g., font, color, leader format) of relationship links. See Editing Relationship Link Styles.
- Text hyperlinks You can edit the style settings (e.g., font, color) of text hyperlinks. See Editing Text Hyperlinks.
- Text popups You can edit the style (e.g., font, color) of the hotspot or the popup body in text popups. See Editing Text Popups.
- Togglers You can edit the style (e.g., font, color) of the hotspot for togglers. See Editing Togglers.
- Topic popups You can edit the style (e.g., font, color) of the hyperlink for topic popups. See Editing Topic Popups.
List of concepts
- Look After you use the concepts proxy to create a list of concepts, you can change the look of that list by using styles. You can modify the look of individual entries in the list, as well as the entire container. See Using Styles to Determine the Look of a List of Concepts.
List of elements
- Look After you use the list-of proxy to create a list of elements (such as a list of figures or tables), you can use styles to determine the look of the generated list. See Using Styles to Determine the Look of a List of Elements.
Lists
- Alignment You can format lists or items within them so that the text is aligned right, left, centered, or justified. See Aligning Lists.
- Background You can set a background color and/or image on lists or items within them. See Setting the Background for Lists.
- Borders You can add borders around lists or items within them. Borders can be added on any side (left, right, top, bottom), or all around. See Setting Borders for Lists.
- Images for bullets You can change the image used for bullets in lists. For example, if you have a small check mark icon that you want to use instead of round bullets, you can select your image. See Selecting Images for List Bullets.
- Indentation You can indent lists or items within them so that they start or end at a certain distance from the left or right side of the window or page frame. See Indenting Lists.
- Line spacing You can specify the amount of spacing between lines of text in a list. See Setting Line Spacing for Lists.
- Page and column breaks You can apply a page or column break to lists or items within them. You might do this if you want a list to end with a particular item on one page and begin with another list item on the next page or column. For example, you could create a class of the <li> style tag and you could call it something like "PageBreakBefore" (li.PageBreakBefore). For most items in a list, you could use the parent <li> tag, but if you want a page break to occur on a particular list item, you could apply your li.PageBreakBefore style to it. This feature is used for print-based output. See Setting Page and Column Breaks for Lists.
- Spacing above/below You can specify the amount of spacing above and below lists or items within them. See Setting Spacing Above and Below in Lists.
- Type You can specify the type of list (e.g., circle, square, decimal, upper alpha) for a style. See Specifying a List Type for a Style.
Mini-TOCs
- Look of mini-TOC in online output You can use the <MadCap|miniTocProxy> style to modify the look of mini-TOCs in your online output. See Using Styles to Determine the Look of an Online Mini-TOC.
- Look of mini-TOC in print-based output For generated mini-TOCs, you can use styles to adjust properties such as font family and size, indentation, word spacing, spacing above/below, TOC width, page number alignment, and leader settings (e.g., the dots between the headings and the numbers). The headings in the mini-TOC will take on the settings that you specify. You can also modify the look of the entire container holding the generated mini-TOC. See Using Styles to Determine the Look of a Print Mini-TOC.
Paragraphs and headings
- Alignment You can format a paragraph so that the text is aligned right, left, centered, or justified. See Aligning Paragraphs.
- Background You can set a background color and/or image on a paragraph. See Setting the Background for Paragraphs.
- Borders You can add borders around a paragraph. Borders can be added on any side of a paragraph (left, right, top, bottom), or all around it. See Setting Borders for Paragraphs.
- Drop caps/initial caps You can create an effect on a paragraph so that the initial letter is different than the others and drops down to the lines below. See Creating Drop Caps Effects and Creating Initial Caps Effects.
- Hyphenation You can specify whether words at the end of a line in a paragraph should be hyphenated before continuing to the next line. You can also determine minimum word and character settings to be used for hyphenation. See Setting Hyphenation.
- Indentation You can indent paragraphs so that they start or end at a certain distance from the left or right side of the window or page frame. See Indenting Paragraphs.
- Line spacing You can specify the amount of spacing between lines in a paragraph. See Setting Line Spacing.
- Next style You can specify that a particular style should be used when you press Enter at the end of the current style. For example, after you type text for a heading and press Enter, you might want the next style to be something like p.TopicText, rather than the main <p> tag. See Setting a "Next" Style.
- Page and column breaks You can apply a page or column break to a paragraph or heading. For example, you might do this if you want the paragraph or heading to start at the beginning of the next page or column. This feature is used for print-based output. See Setting Page and Column Breaks.
- Positioning After you add a paragraph or heading to a topic, you can adjust its positioning on the page. For example, you can float it to the left of the page layout frame to create a side heading. You can do this by applying a positioning setting on the style used by the paragraph. See Positioning Paragraphs and Heading Examples.
- Short line elimination You can use this feature to automatically adjust word spacing if the last line of a paragraph is only a certain number of characters long. Therefore, the spacing may be widened to make the last line longer, or the spacing may be narrowed to bring the words in the last line up to the previous line. See Setting Short Line Elimination.
- Spacing above/below You can set the amount of spacing above and below paragraphs. See Setting Paragraph Spacing Above and Below.
- Widow and orphan control You can use widow and orphan control to avoid instances where "leftover" lines from a paragraph are shown at the top or bottom of a page or column. See Setting Widow and Orphan Control.
Pictures
- Background You can add background settings to an image. This includes the ability to specify a color, another image, and a repeating pattern for the background image. Normally you would not see an image's background, but if you give the image a certain amount of padding, you would see the background around the edges of it. See Adding Backgrounds to Pictures.
- Background image on topics You can add a background image on topics by using the <body> style tag. See Setting a Background Image on Topics.
- Borders You can add borders around an image, specifying the border size, color, and type. See Adding Borders to Pictures.
- Margins You can adjust the margins around an image so that there is extra space above, below, to the right, or to the left of it. See Adding Margins to Pictures.
- Padding You can add padding (i.e., extra space) between an image's border and the image itself. See Adding Padding to Pictures.
- Positioning After you insert a picture, you can adjust its positioning on the page. This includes the ability to wrap text around an image or float a picture outside the frame holding the regular flow of text. See Positioning Pictures.
- Resize You can resize many images at once by using the <img> style tag in the Stylesheet Editor. See Resizing Pictures.
- Thumbnails When you insert images into Flare content, you can specify that the pictures should be displayed as thumbnails (i.e., much smaller versions of the image) in the output. This is a way to condense topics so that pictures are not taking up as much real estate. When you use this feature, you can specify ways that the user can enlarge the image to see its full size (e.g., by hovering over the thumbnail, by clicking the thumbnail). See Showing Images as Thumbnails in Output.
QR codes
- Background You can add background settings to a QR code. This includes the ability to specify a color, image, and a repeating pattern for the background image. Normally you would not see a QR code's background, but if you give the QR code a certain amount of padding, you would see the background around the edges of it. See Adding Backgrounds to QR Codes.
- Borders You can add borders around a QR code, specifying the border size, color, and type. See Adding Borders to QR Codes.
- Margins You can adjust the margins around a QR code so that there is extra space above, below, to the right, or to the left of it. See Adding Margins to QR Codes.
- Padding You can add padding (i.e., extra space) between a QR code's border and the QR code itself. See Adding Padding to QR Codes.
- Resize You can resize QR codes with various methods. See Resizing QR Codes.
Redacted text
- Set Flare supports redacted text, which is text that is "blacked out" in Adobe PDF or Microsoft XPS output. This is much more efficient than attempting to black out text or other content after the document has been printed. You can set redacted text on any kind of content (e.g., characters, paragraphs, images, tables). You can do this locally at the font level by highlighting each piece of content, or you can specify redaction on a style and then apply that style to content whenever necessary. It is recommended that you use styles whenever possible. See Setting Redacted Text on Content.
Rulers (horizontal lines)
- Edit After you insert a ruler ("horizontal line") in a topic, you can edit its settings (e.g., size, color, position) by modifying the <hr> style in the Stylesheet Editor. See Editing Rulers.
Search
- Look of highlighted search terms When users perform searches in your online output, the keywords that are found are highlighted in the topics. The background for each term found in a topic is highlighted in a different color. In Flare you can create styles for this purpose and change not only the color background, but other settings as well (e.g., font style, text decoration). See Using Styles to Change the Look of Highlighted Search Terms.
Spell check
- Skip words You can use styles to skip certain words when performing a spell check. See Using Styles to Skip Words in Spell Check.
Tables
- Using table style sheet You can modify the look and feel of multiple tables at once by editing the properties in a custom table style sheet. These table style sheets let you easily and quickly create patterns and different looks for tables. See How to edit styles in a table style sheet.
- Using topic style sheet You can modify the look and feel of multiple tables at once by editing standard HTML table tags (e.g., <table>, <th>, <td>, <tr>) in your topic style sheet. For example, you might use these styles in order to control the look of the text that appears in your table headings (<th> style) or within the cells (<td> style). See Editing Table Styles in Topic Style Sheets.
  
  When you insert a table, it is set up by default to use standard table tags in the individual cells (e.g., <th> for table headers, <td> for regular table text). However, if you press Enter at the end of a line, a <p> tag is added within the standard tag. Therefore, in order to keep all of the content in your table cells looking consistent, you may want to create a special style class of the <p> tag to be used for table content (e.g., p.tabletext) and apply that style to all of your cells when you first create a table. You can apply specific styles to tables by selecting the table cells, clicking Table>Cell Content Style, and choosing the style to be used for those cells. See Selecting Styles for Table Cell Contents.
- Page layout breaks You can set page layout breaks on tables using a couple of different options. In topic style sheets, you can set breaks on the standard HTML table tags. The most common approach is to set breaks on table rows through the <tr> style tag. Another option is that you can set breaks on rows (and on entire tables) through a table style sheet. And because you can create patterns in table style sheets, each pattern item might have different settings for breaks. See Setting Page Layout Breaks on Tables.
Note: When controlling the look of tables, you should not create and use classes of standard HTML table tags (e.g., a class of the <tr> tag) if you also intend to use table style sheets.
Tables of contents
- Heading levels When creating print-based output, you can determine which topic headings will be displayed at which level in the generated TOC. For example, even though all of your topics may use a heading style of <h1>, you might want some of those topic headings to display at the first level in the print TOC (acting as an <h1>), others at the second level (acting as an <h2>), and still others at the third level (acting as an <h3>). See Using Styles for Print TOC Heading Levels.
- Look For TOCs in print-based output, you can use styles to adjust properties such as font family and size, indentation, word spacing, spacing above/below, TOC width, page number alignment, and leader settings (e.g., the dots between the headings and the numbers). The headings in the print TOC will take on the settings that you specify. You can also modify the look of the entire container holding the generated TOC. See Using Styles to Determine the Look of a Print TOC.
Note: If you want to change the look of your TOC in online output, you can do so by modifying styles within your skin. See Editing Skin Settings and Specifying Skin Style Settings.
Text
- Bold You can apply a bold weight to text. Perhaps the easiest way to do this is to highlight the text and click the Bold button . However, you can also change the properties of a different tag so that it uses a bold weight. See Setting Bold Text.
- Case You can change the case of text so it is all uppercase or lowercase. You can also specify that the first letter of each word in the selected content should be capitalized, while the other letters are lowercase. See Setting the Case of Text.
- Color of background You can set a background color for text. See Setting the Background Color for Text.
- Color of text You can select a color for text. See Setting the Color for Text.
- Font family You can select a font family (e.g., Arial, Verdana) for text to change its look. See Setting the Font Family for Text.
- Italics You can apply italics to text. Perhaps the easiest way to do this is to highlight the text and click the Italic button . However, you can also change the properties of a different tag so that it uses italics. See Setting Italic Text.
- Italic correction You can correct the spacing in a line when italic formatting is involved. Often, when you italicize a word in the middle of a sentence, the last letter of that word has less space between it and the following word (due to the fact that it is italicized and the following word is not). Using italic correction, you can increase this space between the italicized word and the non-italicized word. See Setting Italic Correction.
- Letter spacing You can specify the amount of spacing between letters in text. See Setting Letter Spacing.
- Overline You can specify that a horizontal line should be placed above text (opposite of underlined text). See Setting an Overline on Text.
- Size You can specify the size of text, choosing from many different units of measurement. See Setting the Font Size.
- Smallcaps You can specify that text should be displayed in all capital letters, but in a small size. See Setting Smallcaps on Text.
- Strikethrough You can specify that a horizontal line should be added through the middle of the text, providing the effect of content that has been "striked through." See Setting a Strikethrough Effect on Text.
- Subscript You can apply a subscript effect to topic text, where some text appears below the level of the other characters (e.g., H₂O). Perhaps the easiest way to do this is to highlight the text and then click the Subscript button . However, you can also change the properties of a different tag so that it appears as subscript text. See Setting Subscript Text.
- Superscript You can apply a superscript effect to text, where some text appears above the regular text (e.g., X²). Perhaps the easiest way to do this is to highlight the text and click the Superscript button . However, you can also change the properties of a different tag so that it appears as superscript text. See Setting Superscript Text.
- Underline You can easily underline text. See Setting Underlined Text.
- Word spacing You can specify the amount of spacing between words. See Setting Word Spacing.
Text boxes
- Background After you insert a text box, you can add background settings to the text box. This includes the ability to specify a color, an image, and a repeating pattern for the background image. See Adding Backgrounds to Text Boxes.
- Borders After you insert a text box, you can add borders around it, specifying the border size, color, and type. See Adding Borders to Text Boxes.
- Hyphenation After you insert a text box, you can adjust the way that the text within it is hyphenated. See Setting Hyphenation in Text Boxes.
- Margins After you insert a text box, you can adjust the margins around it so that there is extra space above, below, to the right, or to the left of it. See Adding Margins to Text Boxes.
- Padding After you insert a text box, you can add padding (i.e., extra space) between the text box's border and the text within it. See Adding Padding to Text Boxes.
- Positioning After you insert a text box, you can adjust its positioning on the page. This includes the ability to float text boxes to the left or right, or even outside of page frames. See Positioning Text Boxes.
- Size After you insert a text box, you can adjust its width and height. See Specifying the Size of Text Boxes.
Topics
- Background You can change the background color for topics by using the <body> style or classes of that style. If you want the background color to be applied to all topics using a particular style sheet, you can use the main <body> style. If you want to change the background color for only some topics, create and use a class of the <body> style. See Applying Color to the Background for Topics.
  
  You can also add a background image on topics by using the <body> style tag. See Setting a Background Image on Topics.
- Nonscrolling region For online output you can specify that a certain portion of the content (usually a heading and breadcrumbs, if included) should remain fixed in place. This means that when the end user scrolls down to see more content, the fixed areas do not scroll with the rest of the text. You can see an example of this in any Flare online Help topic. See Creating a Nonscrolling Region.
- Toolbars You can use the <Madcap|topicToolbarProxy> style to change the look of the container holding the generated toolbar. See Using Styles to Determine the Look of Topic Toolbars.