Stylesheets

As with other facets of your documentation universe, you have choices as to how you can structure stylesheet(s) in Flare projects. See Styles and Stylesheets.

[Menu Proxy — Headings — Online — Depth3 ]

How Many Stylesheets?

One of the first decisions you should make when it comes to stylesheets is how many of them you create for your projects. This is true for both regular stylesheets and table stylesheets. Here are the primary options before you:

One Stylesheet for One Project
One Stylesheet for Multiple Projects
Multiple Stylesheets for One Project
Multiple Stylesheets for Multiple Projects

One Stylesheet	Multiple Stylesheets
As a general rule, having fewer files is usually best when possible. If you are able to limit yourself to a single stylesheet, you have just one place to maintain styles. If you have multiple projects, the best way to stay limited to one stylesheet is to use Global Project Linking to import the stylesheet into child projects. See Global Project Linking.	Although a single stylesheet is usually preferred, creating multiple stylesheets can allow for a greater variety of looks.
This solution can work quite well when only one individual at a time is looking at a file.	Although a single stylesheet is usually preferred, creating multiple stylesheets can allow for a greater variety of looks. This is not to say that you cannot achieve the same result in a single stylesheet. With enough effort and knowledge about styles, almost anything is possible. But for some authors, using multiple stylesheets in a situation such as this might be easier and make more sense.

One Stylesheet

Multiple Stylesheets

As a general rule, having fewer files is usually best when possible. If you are able to limit yourself to a single stylesheet, you have just one place to maintain styles.

If you have multiple projects, the best way to stay limited to one stylesheet is to use Global Project Linking to import the stylesheet into child projects. See Global Project Linking.

Although a single stylesheet is usually preferred, creating multiple stylesheets can allow for a greater variety of looks.

This solution can work quite well when only one individual at a time is looking at a file.

Although a single stylesheet is usually preferred, creating multiple stylesheets can allow for a greater variety of looks.

This is not to say that you cannot achieve the same result in a single stylesheet. With enough effort and knowledge about styles, almost anything is possible. But for some authors, using multiple stylesheets in a situation such as this might be easier and make more sense.

Which Level?

Within a project, you can set a regular stylesheet at three levels—project, target, or content file. When possible, setting a stylesheet at the project level is preferred, because doing so makes the styles within the stylesheet available to all content files through the project. However, it might make more sense for some authors to set a freestyle at the target or file level, because it gives you more flexibility when using multiple stylesheets. See Associating Primary Stylesheets With All Files and Associating Stylesheets Locally With Specific Files.

Linking Stylesheets

Linking stylesheets together is another option some authors choose. This approach is sometimes used if you already have more than one stylesheet that you want to leverage, and you do not want to take the time to merge them into a single stylesheet. Just be aware that the settings from one stylesheet may override those from another when they contain the same styles. See Linking Stylesheets.

Inside a Stylesheet

Within a stylesheet, you have even more options for controlling how styles are structured. Following are some of the primary features that you might use.

Mediums

A medium is an alternative group of settings in a stylesheet and can be very useful when you are generating multiple kinds of outputs. Unless you tell Flare otherwise, default style settings will be used for the different outputs you generate. But there may be times when you want to override a default style setting for a particular output; that's why you would use a medium. You need to explicitly tell Flare which medium you want a particular target to use. This is done from the Advanced tab of the Stylesheet Editor. Also, keep in mind that mediums can be used not only with regular stylesheets, but with table stylesheets as well. See Mediums and Media Queries.

Media Queries

A media query is an alternative group of settings in a stylesheet. These settings are automatically used under certain conditions, such as when a screen of a certain size is displaying the output. Media queries are able to do this because they are configured with specific criteria (e.g., maximum width of the screen, orientation, resolution). When the criteria are met, the style settings in the media query are used to display the output. You do not tell a Flare target to use a media query; it just happens automatically. See Mediums and Media Queries.

Classes

In CSS there are primary styles that correspond to the different HTML elements (e.g., h1, h2, p, img). You can think of these as parent styles, because in a way, they can have children. A class is the most common type of child for a style. Some classes might already be included in your stylesheet when you first create a project. Classes can be quite important and useful in a stylesheet. In particular, you might want to use generic classes to streamline your stylesheet even more; generic classes can be used with any parent style in your stylesheet, and no just one specified style. See Important Style Terms and Concepts.

Identifiers

In CSS, an identifier (ID) is similar to a class, except that IDs are unique. An element in your stylesheet can have only one ID on it, whereas it can have multiple classes. And each page of your output can have only one element with a particular ID. For many authors, using an ID may not be important, but for others—such as those making use of JavaScript—IDs can be very useful. See Important Style Terms and Concepts.

What the MadCap Documentation Team Does

When it comes to stylesheets, we do the following.

Number of Stylesheets

We have three stylesheets that we use for our projects.

Our primary regular stylesheet is named “styles.css” and is controlled in our main “Shared” project. This stylesheet is periodically imported into our “Documentation Bible” project, as well as all of our “Develop” projects. Most of our work is done in this stylesheet.

In addition to the main stylesheet, we have a stylesheet called “Home-Page.css” that is used specifically for each product’s Home topic, which has a look quite different from the rest of the topics. This stylesheet is rarely modified.

A third stylesheet in our project is named "icons.css" and is associated with some of our template pages. We almost never edit this stylesheet.

Level

Since almost all of the topics use styles from our main stylesheet, we set this stylesheet at the project level. And because our other stylesheet is used only for the Home topics, we enabled the option to allow local stylesheets.

As for the Home topics for the various products, we associated the “Home-Page.css” stylesheet (as well as “styles.css”) with each one. We also associated these stylesheets with the template page used by each of those Home topics.

Mediums

In addition to the “default” medium (where most of the styles are set) and the factory “print” medium, we created over a dozen mediums in our main stylesheet. For each product, we have an online and a print medium.

Since we have a separate stylesheet for each product’s Home page topic—and because those topics are intended only for online output—we don’t have a need for mediums in that stylesheet.

Media Queries

In our main stylesheet, we use the factory “tablet” and “mobile” media queries to change the look of some styles when content is displayed on smaller devices. We also created a couple of custom media queries to account for especially narrow views, such as in the Dynamic Help window pane.

Classes

We use classes a great deal in our stylesheets, especially in the main stylesheet. We also try to take special advantage of generic classes so that we can easily apply the formatting to many different parent styles.

Example We have a generic class named “center.” If we ever come across block content that we want to position horizontally in the center of the page, we can apply that class to it, regardless of the style used.