Associating Stylesheets

You can associate a stylesheet with specific content for a preferred look and feel. The primary stylesheet controls the look of all files associated at the target or project level. The local stylesheet controls the look of a single file associated at the content level.

With multiple stylesheets, be aware that rules of precedence come into play. In general, the closer a stylesheet is to the source, the higher its precedence will be. To understand how precedence works in the XML Editor and for output, see Primary and Local Stylesheets (and Precedence).

Note Consider the most efficient way to achieve a unique look and feel for different outputs. Instead of using multiple stylesheets it may be more effective to use one stylesheet with different mediums (see Mediums and Media Queries). For example, if the look of content is mostly the same except for minor differences (e.g., product branding, or online vs. print output), then it might make more sense to use one stylesheet with different mediums applied. But if there are a lot of design differences for some content then perhaps multiple stylesheets would be better.

[Menu Proxy — Headings — Online — Depth3 ]

How to Associate a Stylesheet With a Project

After adding a stylesheet to the project, you need to associate the stylesheet with files that you want to use it for. In this example, let’s use the modern stylesheet as a new primary stylesheet, and set it at the project level (since we want all the files in the project to associate with the modern stylesheet).

From the Project ribbon, click Project Properties. The Project Properties dialog opens.
Make sure the Defaults tab has focus, and in the Primary Stylesheet drop-down, select Resources > Stylesheets > Modern. Click OK.

Note With the Austin template, notice the Allow local stylesheets check box is already selected. This option enables you to set “local” stylesheets at the content-file level (e.g., topics).
Open Introduction.htm. The project styles change to the new styles designated by the modern stylesheet. Keep in mind that only one primary stylesheet can be set at the project level.
Select the Project ribbon. From the Build Primary drop-down, select Build All-About-Austin-HTML5. The Builds window pane opens at the bottom of the Flare Desktop interface, and the target begins to generate. When the build finishes successfully, the Build Progress cell turns dark green.
Double-click the row to open the HTML5 output and view the styles in the output.
Repeat the steps above to build and view All-About-Austin-PDF.

Notice the styles in the generated output files. They correspond to the styles from the primary stylesheet. The headings display in light blue, and the font throughout the project is smaller.

How to Associate a Stylesheet With a File

Let's see how the online documentation would look with a different stylesheet set at the local level, for only one topic.

From the Project ribbon, select New > Add Stylesheet. (Selecting from the ribbon is an alternate way to add a stylesheet, instead of selecting from a context menu.)
In the Source section, select New from template.
Expand the Factory Templates folder, and select Sample.css.
In the Stylesheet section, in the File Name field, type Sample.
Click Add. The new stylesheet is added to the Stylesheets folder, and it opens in the Stylesheet Editor.
Open Introduction.htm. The modern stylesheet is still set at the project level, so the topic takes on that look and feel in the XML Editor.
From the Content Explorer, right-click Introduction.htm, and from the context menu select Properties. The Properties dialog opens.
Select the Topic Properties tab.
At the Stylesheet field, click the Select button. Remember, in the Project Properties dialog we enabled the Allow local Stylesheets option. (You have to first allow a local stylesheet, and then apply it.)
In the Stylesheet Links dialog, select Sample.css, and click the right arrow button. This moves the stylesheet over to the current links section, and links the stylesheet to the file. Click OK.
From the Properties dialog, click OK again. The Introduction topic takes on a new style.
Select the Project ribbon. From the Build Primary drop-down, select Build All-About-Austin-HTML5. The Builds window pane opens at the bottom of the Flare Desktop interface, and the target begins to generate. When the build finishes successfully, the Build Progress cell turns dark green.
Double-click the row to open the HTML5 output and view the styles in the output. The output displays topics with the modern stylesheet. The exception is the Introduction topic, which displays styles from the sample stylesheet. The local stylesheet always has precedence over the primary stylesheet.
From the Window ribbon, select Close All Documents.