Using Stylesheets vs. Local Formatting

Local formatting can be very attractive because it is quick and easy. However, it is recommended that you use styles instead of local formatting whenever possible. Although local formatting is very convenient in the short-term, using styles is much more efficient and can save you a great deal of time in the long-term.

How to Apply Local Formatting

1. From the Content Explorer, open Music.htm. We decide the paragraph text looks too small, and we want to make it bigger in all topics. Let’s start changing it.
2. Select (left-click) the p structure bar so that the entire paragraph is highlighted.

3. From the Home ribbon, click the Font Size drop-down, and choose 14pt.

   

4. Click to save your work.

5. Open South-by-Southwest.htm.
6. Select the two paragraphs. (You can click and drag to select the text. Or you can press and hold SHIFT, and then click the p structure bars to select the text.)
7. From the Home ribbon, click the Font Size drop-down, and choose 14pt.

8. Click to save your work.

How to Remove Local Formatting

Since we added local formatting to a couple files in our project, let's remove that formatting before using a stylesheet. See Removing Local Formatting.

1. Open Music.htm.
2. Press CTRL+A to select all of the topic's content.
3. From the Home ribbon, Font section, click .

4. Click to save your work.

5. Open South-by-Southwest.htm. Repeat the above steps to remove the local formatting.

   Note Removing local formatting is important because of style precedence. Flare Desktop lets you have multiple stylesheets (primary and local) set on different files and at different levels. Therefore, you need to understand how precedence works, both in the interface (editors) and the output. In general, the closer something is to the source, the higher its precedence will be. For example, local formatting is close, whereas a factory stylesheet installed with Flare Desktop is farther away. See Primary and Local Stylesheets (and Precedence).

How to Use a Stylesheet for Applying Styles

Changing the style by local formatting was quick for the first two topics. But this could get time-consuming if we continue to change the font size for every paragraph in all the topics. Is there a more efficient way? Yes, and that way is through using a stylesheet.

1. Open the Styles.css file. Let’s work in the Advanced view.

2. From the Styles drop-down, select Paragraph Styles, and select the p style.

   

3. Expand the Font group.
4. Find font-size, and click .

5. From the pop-up window, change the font size to 14pt, and select OK.

6. Click to save your work.

7. Since there are some list items in the project, let’s change the font size on the list styles so all the text appears as the same size. From the Styles drop-down, select List Styles, and then select li.

   

8. From the local toolbar, Show drop-down, select Show: Assorted Relevant Properties. (Your view might already show this filter.)
9. Expand the Font group, and next to font-size, click .

10. From the pop-up window, change the font size to 14pt, and select OK.

    

11. Click to save your work.

12. Open any topic file and see the text has been styled to the larger size—all at once! Using a stylesheet will make the maintenance, and any future updates, easier to manage.
13. From the Window ribbon, select Close All Documents.