Cascading Stylesheets
The appearance of your output can come from more than one stylesheet in your Flare project, meaning that style settings can originate elsewhere. In addition, these settings can be applied differently in a stylesheet, and they "cascade" (combine) to create the final look of your content.
[Menu Proxy — Headings — Online — Depth3 ]
Stylesheet Types
Flare Online supports the following cascading stylesheet (CSS) and formatting options:
-
Branding Stylesheet This CSS file lets you define your project's look and feel for branding purposes, including tables. If you create your project with the Start New Project Wizard, the CSS variables are automatically linked to various places throughout the project where they point to the branding stylesheet.
-
Regular Stylesheet This CSS file lets you store styles for general content in your project, including tables, to control how that content looks.
-
Other Tools Some inline styles (e.g., bold, italic, underline) can be applied using the local toolbar in the Content Editor and Review Editor. Although these styles are “inline” they point to a stylesheet and are controlled by it.
Note Table stylesheets, which allow you to create customizable patterns and control the appearance for tables only, are not supported in Flare Online. However, you can use a regular stylesheet to design your tables. For more information refer to the Flare Desktop Help system.
Order of Precedence
The order of precedence for style rendering refers to the cascading order of stylesheets. Flare Online lets you have multiple stylesheets set at different levels. The rendering order is as follows:
-
Topic level This refers to topic-level CSS, which means you can have a topic directly associated with a particular stylesheet.
-
Branding level Use branding to give your project a custom look (e.g., logo, hero image, font, color palette). When a project is created, a new branding file is automatically added that specifically identifies values for the branding elements.
-
Target level You can associate a stylesheet with a particular target.
-
Project level A very common use case is to use one main stylesheet at the project level. This ensures that all pages within your project have the same appearance.
You might have conflicting style settings at times (e.g., one style says “red” while another says “blue”). A cascade algorithm is used to resolve conflicting issues and dictate which style “wins” in the end. The algorithm considers criteria such as importance, origin, specificity, and source order when determining style precedence.
Be aware that other concepts like inheritance, or how styles and stylesheets are applied (i.e., inline, embedded, linked external stylesheets) to a particular content file also determines how content will eventually look in the output.
Note A general rule regarding precedence (in the editors and output), is that the closer something is to the source, the higher its precedence will be. For example, a style set at the topic-level is close, whereas a style from the browser or a factory stylesheet is farther away. (If no styles are set, then styles come from browser defaults.) It is smart to first broadly set styles (e.g., at the project or branding level). If necessary, you can override broadly applied styles by setting styles at a granular level (e.g., at the topic level).
What’s Noteworthy?
Note This topic is not to provide an exhaustive explanation of cascading. There are many resources online to increase your knowledge.
Note It might be beneficial to use one stylesheet for your project if you can get away with it. This means there is only one stylesheet to maintain. However, you might have a project where you need more than one stylesheet to meet your needs.
Note Linking stylesheets is supported, only in that Flare Online can see linked stylesheets in the Apply CSS Styles drop-down. At this time, you cannot link or merge multiple stylesheets together, unless you use the Code tab in the Stylesheet Editor. Note that editing code is an advanced skill.